0

My images files has files named like this:

image1.jpg image2.jpg image3.jpg ... image9.jpg

I have indexed them all and imported them into the component with:

import IMAGES from "../assets/imageIndex";   

what I would like to do is to match the image, to the component id based on the number at the end of the image file name.

In other words:

<div id={id}>
<img src={IMAGES.image`${id}`;/>
</div>

I have tried:

<img src={() => {
let string = "IMAGES.image";
return string.concat(`${id}`);
}}  

response: Warning: Invalid value for prop `src` on <img> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM

I have also tried a separate function:

function selectImage(id)
{
    return `IMAGES.image${id}`;
}   

<div id={id}>
<img src={selectImage(id)} />
</div>

But I don't think I am using the correct logic here. Any ideas?

cordovez
  • 71
  • 11

0 Answers0