1

So I'm working on a React project and I have a json file with several elements. I'm trying to map over the array from that json file and output the name and image. There's an image folder in the same directory. Basically my issue is that react isn't able to find those images even after providing a relative path. I found something on stackoverflow with this code.

function importAll(r) {
        let images = {};
        r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
        return images;
      }
      
const images = importAll(require.context('./pics', false, /\.(png|jpe?g|svg)$/));

The issue with this is it gets all the images but they have a weird letter/number attached making it so I can't have the json file name/path along with that image. Ex: /static/media/name.a4g6s77.jpg. The other option is to import each image such 'import name from './pics/name.jpg';' Then the issue is I'm getting the json back as a string and I would need to access name as a variable and not a string. I've tried Convert string to variable name in JavaScript but it didn't help maybe because it's in jsx? Any suggestions?

stumpedstump
  • 39
  • 5
  • Ah here's where I found that code https://stackoverflow.com/questions/53762640/how-to-import-all-images-from-a-folder-in-reactjs/53762705 – stumpedstump Mar 21 '21 at 23:54
  • So for now I ended up importing all the pictures one at a time. Adding them to an object. Getting the values when I map over. It works but definitely a poor way to get it done. So I'll leave this up for another day or two in hopes of a better answer. – stumpedstump Mar 22 '21 at 01:01

0 Answers0