Open jlarmstrongiv opened 7 months ago
@ascorbic do you have any suggestions for where the url parameter isn’t getting passed correctly in https://github.com/ascorbic/unpic/blob/main/src/transformers/astro.ts ?
Is it adding the param to the URL? Have you tried manually opening the image and changing the param? Are you able to get it to generate the right format?
I have confirmed that the Astro _image
endpoint can generate other image formats, like webp
After more investigation, it seems
Setting the format on the image component fails when trying to add the param to the URL
<UnpicAstroImage
src="/static/assets/images/owl.jpg?f=webp"
cdn="astro"
layout="constrained"
width={1023}
height={682}
/>
Whereas setting the format using picture and source components works
<picture>
<UnpicAstroSource
type="image/avif"
src="/static/assets/images/owl.jpg"
cdn="astro"
width={1023}
height={682}
/>
<UnpicAstroSource
type="image/webp"
src="/static/assets/images/owl.jpg"
cdn="astro"
width={1023}
height={682}
/>
<UnpicAstroSource
src="/static/assets/images/owl.jpg"
cdn="astro"
width={1023}
height={682}
/>
<UnpicAstroImage
src="/static/assets/images/owl.jpg"
cdn="astro"
layout="constrained"
width={1023}
height={682}
/>
</picture>
P.S.
I think my initial user error was not setting the cdn="astro"
EDIT: I can confirm that avif
image transformations work in development, but fail in production (webp
is fine)
What you can do is pass in one of the generated endpoint URLs. That shoudl let you set the format, and it should also detect it as Astro
Passing in one of the generated endpoint urls didn‘t work, since the passed url ended up in the href url parameter
I may be misunderstanding how the transformers or Astro components work, but I’m not sure how to set
webp
as the format. The url paramf=webp
doesn’t work, and I can’t seem to get the<Source />
component to work either (maybe I’m settingtype="image/webp"
incorrectly?). Anyway, tips to get thewebp
format working are much appreciated.The
<Image />
component works great otherwise (once the typing is fixed)