image
image copied to clipboard
[nuxt3] Passing format prop to nuxt-picture component breaks its behavior
It seems like there is a bug when using the format prop on the nuxt-picture component:
<template>
<div>
<nuxt-img
provider="contentful"
format="avif"
src="https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg"
></nuxt-img>
<nuxt-picture
provider="contentful"
format="avif"
src="https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg"
></nuxt-picture>
</div>
</template>
With the following template, the output is the following (it works on the nuxt-img, not on the nuxt-picture):
<div>
<img src="https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?fm=avif">
<picture><img srcset="https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg"></picture>
</div>
The picture seem to fallback on the default behavior and ignore everything as soon as I put a format. (and does not put the "fm" query parameter)
If I remove the format
<nuxt-picture
provider="contentful"
src="https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg"
>
</nuxt-picture>
outputs the correct html:
<picture>
<source type="image/webp" sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px" srcset="https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=320&fm=webp 320w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=640&fm=webp 640w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=768&fm=webp 768w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1024&fm=webp 1024w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1280&fm=webp 1280w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&fm=webp 1536w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&fm=webp 1536w">
<img src="https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&fm=jpg" sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px" srcset="https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=320&fm=jpg 320w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=640&fm=jpg 640w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=768&fm=jpg 768w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1024&fm=jpg 1024w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1280&fm=jpg 1280w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&fm=jpg 1536w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&fm=jpg 1536w">
</picture>
Tried it with a custom provider, same problem.