1

Hi

I am currently trying to display elements of a list in react and I'm not able to load images using require.
I am using CRA and haven't changed webpack.config.js.

The list

import img1 from "../../assets/work-in-progress.png";

const projects = [
    {
        id: 1,
        image_path: img1,
        title: "t1",
        category: "testing"
    },
    {
        id: 2,
        image_path: require("../../assets/work-in-progress.png"),
        title: "t2",
        category: "testing"
    },
]

How I am displaying the images

<img src={ entry.image_path } alt="Project's" className="rounded" />

Currently, the first image is being displayed correctly but the second doesn't load.

I have already tried using src={ "" + entry.image_path } and got the same result.

João Mota
  • 11
  • 1
  • 2
  • `image_path: img1` this should work. Please make sure you've uploaded your images in public folder. – Sifat Haque Jan 05 '21 at 01:51
  • Yes, that works. The problem is in the second element of the array, the image doesn't load with the 'require' but does so with the import statement. – João Mota Jan 05 '21 at 02:09

1 Answers1

0

I think your path isn't correct. It's working in my end. Here is the working code

Sifat Haque
  • 5,357
  • 1
  • 16
  • 23
  • Yes, that is also working on my end, the problem is in the second element of the array. – João Mota Jan 05 '21 at 02:13
  • I have however edited your sandbox to add the second element as I wrote it locally as you can see [here](https://codesandbox.io/s/kind-ritchie-33x8u) and weirdly enough it worked. I guess the problem is in some local configuration ?? I am using CRA – João Mota Jan 05 '21 at 02:16