Fingerprinting images referenced from HTML

[moonglum]

First off: Let me say thank you for this great project. I'm using it for my homepage, and I really enjoy using it ❤️

One thing I have not yet understood is how I would fingerprint images that are referenced from HTML (not CSS). What works really well for me is something like this:

frontend/styles/index.css is the only entry in my esbuild entryPoints. In one of the CSS files, I reference a font file in frontend/fonts. It is fingerprinted, everything works as I would expect. With no work at all, that's awesome.

Now, I want to reference an avatar.png in my HTML. If I put it into frontend/images, and then try to reference it with asset_path, it does not work. And it makes sense to me: esbuild doesn't know anything about the file. But from the documentation, I don't know how to put it on esbuild's radar. I tried adding it as an entry point, but that did not work (and also doesn't really make sense, I guess). Can someone help me?

[jaredcwhite]

@moonglum It sounds like this might help you: https://www.bridgetownrb.com/docs/frontend-assets#additional-bundled-assets-fonts-images

For the most part, personally I never bother with fingerprinting images. Rather than ever replace an existing image file with a new image at the same path/filename, I'll just add an image with a different filename and then reference that.

[moonglum]

Thanks for your answer, @jaredcwhite 🙇

Maybe I'm missing something, but what is described in this part of the documentation is what I tried and did not work (I use esbuild, if that makes a difference). So what I'm doing:

I put an image in frontend/images/avatar.webp. In my template, I then do:

<img src="<%= asset_path "images/avatar.webp" %>"

Then, the src in the resulting HTML is MISSING_ESBUILD_ASSET

[jaredcwhite]

@moonglum Make sure you've also followed the step under "Globbing multiple assets" — that's what will let esbuild know about your image files.

[moonglum]

Sorry, forgot to write that. But I now found the problem - by explicitly importing the webp file, I got this error message:

No loader is configured for ".webp" files

This is due to the configuration in config/esbuild.defaults.js - I added webp to the list, and NOW IT WORKS ❤️ I created a tiny PR to make this work in general:
#863

[jaredcwhite]

Oh I really appreciate that! Glad we were able to get things sorted out.