I want to render an image in my 'card' component, which gets the image url from the props, but the image won't show. I have created the react app with npx create-react-app, the image is in the src/images and the card component is in src/components. the card component:
import React from 'react'
export default function Card(props) {
return (
<section className='card'>
<img/>
<div className='card--info'>
<img src={props.img}/>
<p className='card--info'>
<span className='gray'>{props.rating}</span> ({props.reviewCount}) • {props.country}
</p>
<p>{props.title}</p>
<p><span className='bold'>{props.price}</span> / person</p>
</div>
</section>
)
}
the app component:
import React from "react"
import Navbar from './components/Navbar'
import Hero from './components/Hero'
import Card from './components/Card'
export default function App(){
return (
<div>
<Navbar />
<Hero />
<section className="cards">
<Card img = '../images/image12.png'
rating="5.0"
reviewCount = {6}
country = "USA"
title = "Life lessons with Katie Zaferes"
price = {136} />
</section>
</div>
)
}
I have also tried the followin methods:
<img src={require(props.img)}/> -> this one will show an error: Uncaught Error: Cannot find module '../images/image12.png'
<img src={new URL(props.img, import.meta.url)
does anyone else know what should I do?
You need to import the image to use if you have a static image.
import React from "react"
import Navbar from './components/Navbar'
import Hero from './components/Hero'
import Card from './components/Card'
import defImage from '../images/image12.png'
export default function App(){
return (
<div>
<Navbar />
<Hero />
<section className="cards">
<Card img ={defImage}
rating="5.0"
reviewCount = {6}
country = "USA"
title = "Life lessons with Katie Zaferes"
price = {136} />
</section>
</div>
)
}
Also If you have a dynamic image name and you want to use that. Try using it this way.
import React from "react"
import Navbar from './components/Navbar'
import Hero from './components/Hero'
import Card from './components/Card'
export default function App(){
return (
<div>
<Navbar />
<Hero />
<section className="cards">
<Card img ="image12.png"
rating="5.0"
reviewCount = {6}
country = "USA"
title = "Life lessons with Katie Zaferes"
price = {136} />
</section>
</div>
)
}
And in card component:
import React from 'react'
export default function Card(props) {
return (
<section className='card'>
<img/>
<div className='card--info'>
<img {require(`../images/${props.img}`)}/>
<p className='card--info'>
<span className='gray'>{props.rating}</span> ({props.reviewCount}) • {props.country}
</p>
<p>{props.title}</p>
<p><span className='bold'>{props.price}</span> / person</p>
</div>
</section>
)
}
Make sure if you are using images with require then those images should be in public folder
Meybe a path is not correct? Put image to public folder and then use /image/name.png I use it all the time. I think if I render something for everybody, so it can be on public.