image icon indicating copy to clipboard operation
image copied to clipboard

[nuxt3] Passing format prop to nuxt-picture component breaks its behavior

Open PierreCavalet opened this issue 3 years ago • 0 comments

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&amp;fm=webp 320w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=640&amp;fm=webp 640w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=768&amp;fm=webp 768w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1024&amp;fm=webp 1024w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1280&amp;fm=webp 1280w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&amp;fm=webp 1536w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&amp;fm=webp 1536w">
   <img src="https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&amp;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&amp;fm=jpg 320w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=640&amp;fm=jpg 640w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=768&amp;fm=jpg 768w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1024&amp;fm=jpg 1024w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1280&amp;fm=jpg 1280w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&amp;fm=jpg 1536w, https://images.ctfassets.net/944fk97h13dc/TwV2tsA6WHPvMhxG2Sxu1/b04c7a7ba1795b956964ee4cbcb7a015/superimage2.jpg?w=1536&amp;fm=jpg 1536w">
</picture>

Tried it with a custom provider, same problem.

PierreCavalet avatar Oct 05 '22 14:10 PierreCavalet