React Image Referencing Help

JavaScript
1

I have a data.js file with an array of profile objects and an assets/images folder in the same directory. I’ve imported the data file into my component and trying to map over the array in my component but am unable to get the images to show, can someone please help me

[
  {
    id: 1,
    avatar: "./assets/images/victor.jpg", // not working
    name: "Victor",
  },
  {
    id: 2,
    avatar: "./assets/images/mary.jpg",
    name: "Mary",
  },
]
2

If this is create react app, then what it does is take all your JS files in the src folder and compiles them down to a single file that gets called in the script tag of an HTML page.

If you just put your image files in a folder in src. They’re not JS files, they can’t be part of that single JS file, they’re images. And that assets/images folder doesn’t exist when that JS is built anyway

CRA has some features that allow you to magically import stuff that isn’t JS into JS files (it will then put the images somewhere and generate correct paths). But you need to import them individually.

Or you can put them in the public folder, where they will be public, available to the app – of you put them in public/assets/images then they will be available at the path assets/images

3