Best way to handle images in Remix

[spark cliff]

This is something I just found out which definitely caught me off-guard but it makes sense. Basically in my Remix app since everything is pretty much static (not connected to any CMS and the content doesn't change that often), I've decided to put all the images inside the public folder and then reference those images as something like:

const imagesPerLocation = {
  location1: ['/images/location-1-image-1.webp, '/images/location-1-image-2-webp'],
  location2: ['/images/location-2-image-1.webp, '/images/location-2-image-2-webp']
}

Since I have a lot of images I decided against using static imports just because of the sheer number of imports that would cause and also because I'm not sure if I could use those static imports as I mentioned above. However what I've found by using this methodology is that every asset under the public folder gets this express.static("build/client/assets", { immutable: true, maxAge: "1y" }) meaning that those images will be forcefully be cached for a full year until the browser decides to use the provided ETag value. This effectively means that every image that I've changed thus far has not been completely reflected on the user's browsers.

What would be the recommended way in my scenario? Where static imports would quickly become way too cumbersome but at the same time I want to be able to change the images in the public folder freely and those would reflect on the user's browsers - either by hashing / fingerprinting or using less aggressive Cache-Control headers?

[lost flare]

Consider not putting images in the public folder and instead putting them in app/assets/images or similar. Then import them from your code. That way Vite will automatically hash them and copy to the dist folder on build. The hash in the filename means any changes will bypass browser cache.

[spark cliff]

However the only way I could use them in the code after importing them would be with something like

import imageFile from '~/assets/image.webp';
<img src={imageFile} />
```right?

Or could I accomplish the same with an object / array?

Just realised that Vite will indeed copy the file and then replace it with the path so it would just work theoretically

[lost flare]

Maybe a glob import would be useful if you have lots of images? Not something I've tried before with images though.

const locations = Object.values(import.meta.glob('~assets/images/locations/*.webp', { eager: true, query: '?url' }));

https://github.com/vitejs/vite/discussions/12191

[spark cliff]

Ok, so static importing and using it in an array works as expected. I get the string for the final path with a fingerprint as expected so worst case scenario I'll just have a ton of imports but this qualms my aggressive cache behaviour

Will read into that issue though as I would much rather not have all those imports in place though 😅

Thanks a lot for your help man, it's appreciated 👍

[spark cliff]

const gallery = import.meta.glob("~/assets/images/*.webp", {
  eager: true,
  query: "?url",
  import: "default",
});

This worked like just a beauty

Also got this

This is just perfection, thank you so much again 💪

[lost flare]

Nice! That looks like a really clean approach