Image doesn't display React

Question

I'm building a website by react and my local image doesn't display. I use props to pass the properties from Cards.js to CardItem.js then every properties display except image. I don't know what is a problem with my code :(

Here is Cards.js:

import React from 'react'
import CardItem from './CardItem'
import './Cards.css'

function Cards() {
    return (
        <div className="cards">
            <h1>Check out these EPIC Destinations!</h1>
            <div className="cards-container">
                <div className="cards-wrapper">
                    <ul className="cards-items">
                        <CardItem
                            src='../assets/images/img-9.jpg'
                            text='Explore the hidden waterfall deep inside the Amazon Jungle'
                            label='Adventure'
                            path='/sevices'
                        />
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Cards

CardItem.js:

import React from 'react'
import { Link } from 'react-router-dom'

function CardItem(props) {
    return (
        <>
            <li className="cards-item">
                <Link className="cards-item-link" to={props.path}>
                    <figure className="cards-item-pic-wrap" data-category={props.label}>
                        <img src={props.src} alt="Travel Img" className="cards-item-img" />
                    </figure>
                    <div className="cards-item-info">
                        <h5 className="cards-item-text">{props.text}</h5>
                    </div>
                </Link>
            </li>
        </>
    )
}

export default CardItem

try this https://stackoverflow.com/questions/34582405/react-wont-load-local-images — Dolev Dublon, Feb 17 '21 at 17:30
What is the html output? Are you sure the `src` property points to a valid image file url? — Håken Lid, Feb 17 '21 at 17:30
I have already used "require" but it doesn't work. @DolevDublon — eight, Feb 18 '21 at 07:46

score 1 · Accepted Answer · answered Feb 17 '21 at 17:31

we want to import the image first

import img from './assets/images/img-9.jpg';

We named image as img use it in your code.

import React from 'react'
import CardItem from './CardItem'
import './Cards.css'
import img from './assets/images/img-9.jpg';

function Cards() {
    return (
        <div className="cards">
            <h1>Check out these EPIC Destinations!</h1>
            <div className="cards-container">
                <div className="cards-wrapper">
                    <ul className="cards-items">
                        <CardItem
                            src={img}
                            text='Explore the hidden waterfall deep inside the Amazon Jungle'
                            label='Adventure'
                            path='/sevices'
                        />
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Cards

Importing images like that requires webpack. They didn't mention that they are using webpack. — Håken Lid, Feb 17 '21 at 17:32

Marzieh Mousavi · Answer 2 · 2022-02-11T09:01:23.273

1

first import image

import img from '../assets/images/img-9.jpg'

then use it

<CardItem src={img} .../>

edited Feb 11 '22 at 09:01

answered Feb 17 '21 at 17:31

Marzieh Mousavi

1,213
1
12
28

1

Code dumps do not make for good answers. You should explain *how* and *why* this solves their problem. I recommend reading, "[How do I write a good answer?"](//stackoverflow.com/help/how-to-answer) – John Conde Feb 18 '21 at 00:03

score 0 · Answer 3 · answered Dec 06 '21 at 05:10

I hope this helps you, resources https://create-react-app.dev/docs/using-the-public-folder/:

for Cards.js file: ...

<CardItem
     src='/images/img-9.jpg'
     text='Explore the hidden waterfall deep inside the Amazon Jungle'
     label='Adventure'
     path='/services'
/>

And...

for CardItem.js file: ...

<img
     className='cards__item__img'
     alt='Travel'
     src={process.env.PUBLIC_URL + props.src}
/>

Image doesn't display React

3 Answers3