React: Passing images as props images not showing

JavaScript
1

I am trying to pass an image from an array of JS objects which contain images and some other basic values. However, for some reason, I am unable to pass the images but everything else is working fine can someone please help take a look please thanks so much.

import './index.css'
import Navbar from './Navbar'
import Hero from './Hero'
import Card from './Card'
import carddata from './data'


const data = carddata.map((info)=>{
    return(
        <Card
          key={info.key}
          img={info.coverImg}
          rating={info.stats.rating}
          reviewCount={info.stats.reviewCount}
          location={info.location}
          title={info.title}
          price={info.price}
        />

        
    )
})

  export default function App() {
    return (
      <div>
        <Navbar/>
        <Hero/>
        <section className='cards-list'>
        {data}
        </section>
        
      </div>
        
    )
    
}

import stars from '/assets/images/Star1.png'
import PropTypes from 'prop-types';

export default function Card(props) {
    const {coverImg,reviewCount,location,title,price} = props;
    console.log(coverImg);
    return(
        <div className='card'>
            <img src={(`/images${coverImg}`)} alt="swimmerimg" className='card--image' />
            <div className='card--stats'>
                <img src={stars} alt="stars" className='card--star'/>
                <span className='gray'>({reviewCount}) • </span>
                <span className='gray'>{location}</span>
            </div>
                <p className='card--title'>{title}</p>
                <p className='card--price'><span className='bold'>From ${price} / person</span></p>
            
        </div>
    )
}
Card.propTypes = {
    coverImg: PropTypes.string.isRequired,
    reviewCount: PropTypes.number.isRequired,
    location: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired
};

import swimmer from '/assets/images/katie-zaferes.png';
import wedding from '/assets/images/wedding-photography.png';
import bike from '/assets/images/mountain-bike.png';

export default [
    {
        id: 1,
        title: "Life Lessons with Katie Zaferes",
        description: "I will share with you what I call \"Positively Impactful Moments of Disappointment.\" Throughout my career, many of my highest moments only came after setbacks and losses. But learning from those difficult moments is what gave me the ability to rise above them and reach my goals.",
        price: 136,
        coverImg: {swimmer},
        stats: {
            rating: 5.0,
            reviewCount: 6
        },
        location: "Online",
        openSpots: 0,
    },
    {
        id: 2,
        title: "Learn Wedding Photography",
        description: "Interested in becoming a wedding photographer? For beginner and experienced photographers alike, join us in learning techniques required to leave the happy couple with memories that'll last a lifetime.",
        price: 125,
        coverImg: {wedding},
        stats: {
            rating: 5.0,
            reviewCount: 30
        },
        location: "Online",
        openSpots: 27,
    },
    {
        id: 3,
        title: "Group Mountain Biking",
        description: "Experience the beautiful Norwegian landscape and meet new friends all while conquering rugged terrain on your mountain bike. (Bike provided!)",
        price: 50,
        coverImg: {bike},
        stats: {
            rating: 4.8,
            reviewCount: 2
        },
        location: "Norway",
        openSpots: 3,
    }
]
1 Like
2

Please post your actual code instead of a screenshot. Thanks

1 Like
4

Based on the code you posted, the issue may be one of a few possibilities:

  1. You are using object shorthand in ‘./data’ and are accessing the wrong value as a result:
{
    id: 1,
    title: "Life Lessons with Katie Zaferes",
    description: "I will share with you what I call \"Positively Impactful Moments of Disappointment.\" Throughout my career, many of my highest moments only came after setbacks and losses. But learning from those difficult moments is what gave me the ability to rise above them and reach my goals.",
    price: 136,
    // The line below is the same as "{ swimmer: swimmer }"
    // When used in './Card', the image URL would then be '/images[object Object]'
    // Use "coverImg: swimmer" instead (without the braces around it)
    coverImg: {swimmer}, 
    stats: {
        rating: 5.0,
        reviewCount: 6
    },
    location: "Online",
    openSpots: 0,
}
  1. You may not need to add ‘/images’ to the front of coverImg in ‘./Card’. If the stars image in ‘./Card’ is working correctly, then you probably don’t need to add ‘/images’ to the front of coverImg since the URLs for each image are likely generated the same way
5

Agree with cragamuffin. And there is one more thing, that you tried to concat the coverImg path with the /images which duplicated. The result is you created an entirely new path /images/assets/images/katie-zaferes.png

6

After making some changes I have managed to fix the problem however, I dont know what I changed that really fixed it but I would like to thank you for your help :smile:

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.