bug: issue with nuxt/Image dynamic sizing

[Drew-Macgibbon]

Even when using the sizes prop it doesn't work. There are some issues in the repo related to this.

• https://github.com/nuxt/image/issues/618
• https://github.com/nuxt/image/issues/768
• https://github.com/nuxt/image/issues/645
• https://github.com/nuxt/image/issues/469

My current workaround is to manually set the display of each nuxtImg component like so:

<NuxtImg
    class="hidden md:flex"
    :src="avatar"
    width="180"
    height="180"
/>
<NuxtImg
    class="md:hidden"
    :src="avatar"
    width="80"
    height="80"
/>

This is less than optimal, open to ideas while we wait for a fix. They are actively trying to integrate NuxtImage into Nuxt 3 core, so shouldn't have to wait too long.

[Drew-Macgibbon]

Tested with static and dynamic urls. Tested without width / height and just sizes properties

It seems there is an issue when rendering the srcset intrinsic size, the rendered size from width / height overides it :

<img src="/_ipx/s_240x240/images/team/drew-macgibbon.jpg" onerror="this.setAttribute('data-error', 1)" width="80" height="80" data-nuxt-img="" sizes="(max-width: 800px) 180px, 240px" srcset="/_ipx/s_180x180/images/team/drew-macgibbon.jpg 180w, /_ipx/s_240x240/images/team/drew-macgibbon.jpg 240w">

When I hover on any of the srcset images it shows something like this:

Rendered size: | 80 × 80 px Rendered aspect ratio: | 1∶1 Intrinsic size: | 240 × 240 px Intrinsic aspect ratio: | 1∶1 File size: | 9.0 kB Current source: | http://localhost:3000/_ipx/s_240x240/images/team/drew-macgibbon.jpg

[christianwebdev200]

up for this

Can we implement NuxtPicture as it should be? Basically, NuxtPicture is similar to NuxtImg. but what we wanted is can declare the different sources just like this implementation

also similar to this https://github.com/nuxt/image/issues/768

[Drew-Macgibbon]

@christianwebdev200 yes NuxtPicture will work well for this case. No doubt this issue will be fixed by v1 stable. Thanks!