react load grid of images based on name

Question

I have the following images in a src/assets folder of a React project.

src/assests/
     a.webp
     b.webp
     c.webp

I would like to define a functional component that is a div containing the image corresponding to its name (name is a string).

I can get it to always be 'a'

import a from "./assets/a.webp";

function ImageTile({name}){
    return <div> 
               <img src = {a}/>
           </div>
}

But if I change it to this to try and be more general then the image doesn't load correctly.

function ImageTile({name}){
    return <div> 
               <img src = {eval(name)}/>
           </div>
}

Even if this did work it seems tedious to have to import every image. I'm happy to save the images somewhere else within the react app directory.

Here is a github gist with a full App.js example if it helps people understand what I am trying to do?

https://gist.github.com/oli5679/96f4549d82b1897a91c2528a4651cd51

I have also tried the approach suggested here, but get an error

function importAll(r) {
    let images = {};
    r.keys().map(item => { images[item.replace('./', '')] = r(item); });
    return images;
}

const images = importAll(require.context('./assets', false, '/\.webp/'));
console.log(images);
# require__(...).context is not a function

How are you creating the ImageTitle component? (i.e. what are you passing in as `name`?) — Nicholas Ficara, Feb 19 '22 at 16:41
Good point, the name is a string. doesn't work, and neither does — oli5679, Feb 19 '22 at 16:46
Here is your issue: In the first example, `a` is not a string, it is an imported resource. You would need to pass a prop that was imported in. For example, you need `import a from "./assets/a.webp";` in your parent component, and then you can pass in `a` to your ImageTile component. — Nicholas Ficara, Feb 19 '22 at 16:54
understood, is it possible to load the corresponding image based on a string? — oli5679, Feb 19 '22 at 16:56
See [here](https://stackoverflow.com/questions/44607396/importing-multiple-files-in-react) — Nicholas Ficara, Feb 19 '22 at 17:00
Thanks, but I get errors require__(...).context is not a function, does this work within react applications? — oli5679, Feb 19 '22 at 17:30
See section with updated details for ES6 in the accepted answer. — Nicholas Ficara, Feb 19 '22 at 17:32

react load grid of images based on name

0 Answers0