Requires not loading images in CRA

Question

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.

Answer 1

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