CODEWITHSUNDEEP
reactjs
eight
eight

Reputation: 79

Image doesn't display React

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

Upvotes: 1

Views: 1157

Answers (3)

Marzieh Mousavi
Marzieh Mousavi

Reputation: 1624

first import image

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

then use it

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

Upvotes: 1

Ricardo Vergara
Ricardo Vergara

Reputation: 1

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

Upvotes: 0

Abhiram P Jayan
Abhiram P Jayan

Reputation: 369

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

Upvotes: 1

Related Questions