How to display an image from an array of images in react

Question

I have an array of object, with each object having an imageUrl property, but when I loop through this array to display all images, the image doesn't get rendered

I loop through the array and pass the attribute housing the image link to the image src

const ProjectData = [
  {
    title: "RestaurantX",
    imageUrl: "../assets/images/restaurantpassport.png",
    githubUrl: "",
    deployUrl: "",
    description: "",
    tech: []
  },
]

{ProjectData.map(project => {
            return (
             <Work borderColor={changeColor()}>
                <img
                  src={project.imageUrl}
                  alt={project.title}
                />
                <a className="github">
                  <i className="material-icons">code</i>
                </a>
                <a className="deploy">
                  <i className="material-icons">launch</i>
                </a>
              </Work>
            )

are you sure the url is correct? Also in your example it doesn't look the the <Work> component is closed before returning. — phishfordead
– phishfordead, Commented Jul 2, 2019 at 16:19
You can't use relative paths (../) in an img src. You'll probably have to copy them in to a known folder in your output directory and then access them via /knownfolder/filename.png — Will Jenkins
– Will Jenkins, Commented Jul 2, 2019 at 16:22
it still doesn't work, I have converted ProjectData to projectData — Johnson Ogwuru
– Johnson Ogwuru, Commented Jul 2, 2019 at 16:22

Will Jenkins · Accepted Answer · 2019-07-02 16:54:11Z

4

You can't use a relative path that points to somewhere in your project directory. Usual practice is to copy your images during your build process into a known folder in your output directory and then access them via /knownfolder/filename.png - the leading slash makes the path relative to the root of your app.

It isn't enough to just remove the .. as your running app can't access your project folders at run-time.

As you are using create-react-app, you have (at least) two choices: 1) import the images using import or 2) Put them in your /public folder and use the PUBLIC_URL variable.

The first approach looks like this:

import restaurantPassport from '../assets/images/restaurantpassport.png'; 

<img src={restaurantPassport} />;

This is probably the one for you (see here for more detail), but if you want to go the other way it's covered here in the docs.

edited Jul 2, 2019 at 16:54

answered Jul 2, 2019 at 16:25

Will Jenkins

9,9371 gold badge30 silver badges49 bronze badges

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

5 Comments

Johnson Ogwuru Over a year ago

I really don't understand the approach, you are recommending

Will Jenkins Over a year ago

how is your app being bundled? are you using webpack?

Akhila Over a year ago

This only works for few images right? What if I want to import multiple images? Like I can't write import for every image path in the object? Also if I copy all the images to the public folder, won't I have to add this public url thing again? I also saw that they recommend people to import images from src. But how do I do that for multiple images? Please help!

Will Jenkins Over a year ago

@Akhila - seems like you might need to ask a new question

Akhila Over a year ago

Yeah after reading some more questions the only thing to do was to move the images that I'm dynamically loading to the public folder :-/

Kunal Mohta · Accepted Answer · 2019-07-02 16:54:26Z

1

You could use require.

Something like this -

const ProjectData = [
  {
    ...
    imageUrl: require("../assets/images/restaurantpassport.png"),
    ...
  },
]

answered Jul 2, 2019 at 16:54

Kunal Mohta

111 bronze badge

Comments

Tijani Sylla · Accepted Answer · 2021-07-29 07:28:03Z

1

you can simply declare using ${restaurantpassport} :

import restaurantpassport from "../assets/images/restaurantpassport.png"




 const ProjectData = [
  {
    title: "RestaurantX",
    imageUrl: `${restaurantpassport}`,
    githubUrl: "",
    deployUrl: "",
    description: "",
    tech: []
  },
]

{ProjectData.map(project => { return ( code launch )

answered Jul 29, 2021 at 7:28

Tijani Sylla

113 bronze badges

Comments

Johnson Ogwuru · Accepted Answer · 2019-07-02 16:58:03Z

0

I was able to get it to work, in a way, I won't say is ideal, but works. I just had to make this change to ProjectData array.

  {
    title: "RestaurantX",
    imageUrl: require("../assets/images/restaurantpassport.png"),
    githubUrl: "",
    deployUrl: "",
    description: "",
    tech: []
  },
]

answered Jul 2, 2019 at 16:58

Johnson Ogwuru

351 gold badge1 silver badge10 bronze badges

Comments

Adeyemi kofo · Accepted Answer · 2024-03-12 09:55:13Z

0

Thanks. I had the same issue. I only added my image with a {} , but assind a backtick and dollar sign helped it display just like you did here:

    imageUrl: `${restaurantpassport}`

edited Mar 12, 2024 at 9:55

answered Mar 12, 2024 at 9:53

Adeyemi kofo

11 bronze badge

Collectives™ on Stack Overflow

How to display an image from an array of images in react

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related