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

What is the html output? Are you sure the src property points to a valid image file url? — Håken Lid
– Håken Lid, Commented Feb 17, 2021 at 17:30
I have already used "require" but it doesn't work. @DolevDublon — eight
– eight, Commented Feb 18, 2021 at 7:46

Abhiram P Jayan · Accepted Answer · 2021-02-17 17:31:13Z

1

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

answered Feb 17, 2021 at 17:31

Abhiram P Jayan

3691 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Håken Lid Over a year ago

Importing images like that requires webpack. They didn't mention that they are using webpack.

Marzieh Mousavi · Accepted Answer · 2022-02-11 09:01:23Z

1

first import image

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

then use it

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

edited Feb 11, 2022 at 9:01

answered Feb 17, 2021 at 17:31

Marzieh Mousavi

1,7141 gold badge20 silver badges31 bronze badges

1 Comment

John Conde Over a year ago

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?"

Ricardo Vergara · Accepted Answer · 2021-12-06 05:10:39Z

0

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}
/>

answered Dec 6, 2021 at 5:10

Ricardo Vergara

1

Collectives™ on Stack Overflow

Image doesn't display React

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related