Render Image in React using Map

Question

I am working on a React project that has all the data in a file called data.js. Within the file is a array with several objects inside. In a separate file call SuppList.js I am using the map method to loop through the array and display everything. I am able to display everything with the exception of the images in the array.

data.js

const supps = [
    {id: 1, suppName: "Protein", purpose: "Muscle Building and Recovery", pic: "./images/protein.png" },
    {id: 2, suppName: "Creatine", purpose: "Muscle Building, Strength and Recovery", pic: "./images/creatine.png"},
    {id: 3, suppName: "Minerals", purpose: "Health & Recovery", pic: "./images/minerals.png"},
    {id: 4, suppName: "Vitamin", purpose: "Health and Fat Loss", pic: "./images/vitamins.png" },
    {id: 5, suppName: "Fat-Loss", purpose: "Weight Loss & Recovery", pic: "./images/fat-loss.png" },
    {id: 6, suppName: "Pre-Workout", purpose: "Strength & Stamina", pic: "./images/pre-workout.png" },
]

export default supps;

SuppList.js

import elements from './data'

const SuppList = () => {
    return (
        <div>
            {elements.map((element) => (
                <div>
                <h3>{element.suppName}</h3>
                <p>{element.purpose}</p>
                <img src={element.pic} alt={element.id}/>
                </div>
                ))}
        </div>
    )
}
   
export default SuppList;

What does your build environment look like? Inspect the page and 1) if the images have the correct paths and 2) if there are any 404 logs regarding missing pages. I suspect it is a path issue, and the browser can't find the images at the provided paths — Werlious
– Werlious, Commented Feb 18, 2021 at 3:39
@VivekTarsariya I dont think props is the issue here. The OP states that everything else loads fine, which means the component is running as expected. This points the issue at only the <img> part, which would display fine unless improperly sized or the path is incorrect. I got my money on the images not being at the path — Werlious
– Werlious, Commented Feb 18, 2021 at 3:41
@VivekTarsariya I would also advise against providing help in other languages unless you know the OP (and preferably others) will understand. For example, while your profile puts you in India, the OP's profile puts them in Guatemala. So I very much doubt a hindi video would be of much use to the OP — Werlious
– Werlious, Commented Feb 18, 2021 at 3:45

Basith · Accepted Answer · 2021-02-18 03:52:44Z

1

You can use require.

Something like this -

const supps = [
  {
    ...
    pic: require("./images/protein.png"),
    ...
  },
]

Then you can call this in map function:

<img src={element.pic} alt={element.id}/>

answered Feb 18, 2021 at 3:52

Basith

717 bronze badges

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

Comments

PythonCoder1981 · Accepted Answer · 2021-02-18 15:12:05Z

0

I was able to resolve this issue. In react all static/images need to be placed inside of the public folder and not the src folder. After moving the folder over the issue was resolved.

answered Feb 18, 2021 at 15:12

PythonCoder1981

46311 silver badges24 bronze badges

Collectives™ on Stack Overflow

Render Image in React using Map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related