I have a Vite project, and I’m dynamically building many buttons. I do this by have a JSON file with this information

[
{
“id”: “payback”,
“artURL”: “src/assets/art/2024/payback.png”,
“thumbURL”: “src/assets/art/2024/thumbnails/payback.png”,
“year”: 2024,
“nsfw”: false
}
]

artURL would be the full image when button is clicked and thumbURL is a cropped version for the button icon. This is the code I use to build those buttons.

const populateArt = (year) => { return galleryData.filter(item => item.year === year).map(item => ( <button key={item.id} className="galleryImage" onClick={() => handleImageCLick(item.artURL)}> <img src={item.thumbURL}></img> </button> )); }

suspected problem is that the images get hashed file names when uploaded, but I’m not sure how I would call those names? Any advice is appreciated!

I tried pointing to image paths that were hardcoded in a JSON file, this worked locally but when pushed live the images did not load.