image
image copied to clipboard
nuxt
[ipx] allow _mock_ extension suffix
When generating image URLs for IPX, the format is usually like /_ipx/f_webp/path/to/image/with/original.ext. While this is totally fine by browsers to use the right mime type and format, it can be confusing (reported many times before by users) and also harder for reverse proxies to determine mime based on path. We can make it better by adding ?.webp (actual format) to the end of IPX generated URLs, however it fixes issues for runtime links, for prerendering, it is impossible.
@pi0 I don't feel like it's a huge issue, if it can be changed easily, that would be great. Otherwise, maybe juste a mention in the documentation ? Since there was no information, that' why I was confused.
Adding docs would be nice first step indeed 👍🏼 As mentioned in description it is mainly to inform and also solve issues with reverse proxy mimes.
This problem can be critical when using static hosting with SSG, because hosting service serves WebP image with extension .png as image/png. As far as I tested, browsers seem to prioritize type attribute in source elements over content-type header so it works fine, but I don't know whether this behavior is defined in spec.
As a workaround for now, we can configure header overrides in _headers file and so on, to be concrete Content-Type: image/avif for /_ipx/f_avif* and Content-Type: image/webp for /_ipx/f_webp*.
I agree this should be solved to avoid any confusion and yes, static hosting services serves WebP with extension .png as image/pgn as @fabon-f said.
Is there any advance hook to force ipx appending extra extension for the generated files? eg: /_ipx/f_webp/image/apple.png.webp.
If it is possible, maybe this can be an alternative workaround instead of configuring header overrides for the content-type.
