react.js rendering dynamic images not working

Question

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?

Answer 1

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.

Answer 2

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