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?