Image not getting displayed when using Reactjs map function. Error--SRC undefined

Question

Here's the error:

Everything else gets displayed well instead of my image. I am using image which saved in my local computer and I'm getting no error in VC editor console. I get error in developer tools console.

./card/index.jsx

import React from 'react'
const Card = (props) => {
        console.log(props);
        return (
        <div className="wrapperDiv">
            <img src={props.img} alt={props.alt}/>
            <p>{props.desc}</p>
            <button>{props.value}</button>
          </div>
    )
}

export default Card

./reports/index.jsx

import React from 'react';
import Card from './Card';
import Data from './Card/data';

function createCard(Data){
    return <Card
    src={Data.src}
    alt={Data.alt}
    desc={Data.desc}
    value={Data.value}
    />
}


const Reports = () => {
    return (
        <div className="reportsDiv">
           { Data.map(createCard)}
            
        </div>
    )
}

export default Reports

data file

import img1 from "./img.jpg";
const Data=[
    {
        id:1,
        img:"{img1}",
        alt:"helloworld",
        desc:"Sdfasdf",
        value:"5GB" 
    },
    {
        id:2,
        img:{img1},
        alt:"helloworld",
        desc:"Sd",
        value:"35GB"
    },
    {
        id:3,
        img:{img1},
        alt:"helloworld",
        desc:"asdf",
        value:"3GB"
    }
]

export default Data;

It works if I give value in card component like this:

 {/* <Card 
                img={img1}
                alt="helloworld"
                desc="System Junk"
                value="35GB" 
                />
                
                       
                <Card 
                img={img1}
                alt="helloworld"
                desc="Sdfasdf"
                value="35GB" 
                />
                <Card 
                  



img={img1}
                alt="helloworld"
                desc="vhghhjghjg"
                value="35GB" 
                />
               */}

But src is coming undefined if I use map function. Please help. Thanks in advance for help.

Majid M. · Accepted Answer · 2021-07-20 20:06:46Z

2

Note your createCard function which you're sending src as the image source :

function createCard(Data){
    return <Card
    src={Data.src}// you're sending src as the prop
    alt={Data.alt}
    desc={Data.desc}
    value={Data.value}
    />
}

But you will use img as the source in the Card component:

const Card = (props) => {
        console.log(props);
        return (
        <div className="wrapperDiv">
            <img src={props.img} // but using img as the prop which is incorrect
                 alt={props.alt}/>
            <p>{props.desc}</p>
            <button>{props.value}</button>
          </div>
    )
}

Change the Card to the bellow will solve the problem:

const Card = (props) => {
        console.log(props);
        return (
        <div className="wrapperDiv">
            <img src={props.src} // change it to src
                 alt={props.alt}/>
            <p>{props.desc}</p>
            <button>{props.value}</button>
          </div>
    )
}

answered Jul 20, 2021 at 20:06

Majid M.

4,9941 gold badge16 silver badges35 bronze badges

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

33 Comments

Majid M. Over a year ago

Check your path in comparison of CardComponent. I mean if you would like to import the image on CardComponent, what will be the source of image? Will it be again './img.jpg'?

Majid M. Over a year ago

@fullstackdeveloper in your data.js file, change all the img prop in your data model to src. please see this link : codesandbox.io/s/goofy-kapitsa-w7opw everything works fine.

Majid M. Over a year ago

Have you tried npm run build command before you start the app?

Majid M. Over a year ago

I've seen that you have some images in other folders. Please remove all of them and just keep the one in public folder. Same as this structure in this link: codesandbox.io/s/dawn-star-0rpep

Majid M. Over a year ago

I think the remote connection in your real code and check the issue will be the final solution. Please leave a comment for contact information.

|

Collectives™ on Stack Overflow

Image not getting displayed when using Reactjs map function. Error--SRC undefined

1 Answer 1

33 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

33 Comments

Your Answer

Sign up or log in

Post as a guest

Related