NuxtImg - Srcset and size don’t behave as in native img
When using img tag, browser breakpoints behave as they should.
Desired behaviour:
fetch images on specified breakpoints when resizing viewport (open network tab to check and resize viewport)
On retina display it works:(0-370: preview image), (370-720: secondPreview image), (720-740: middle image), (740-1400 full image)
rendered correct html like this:
img style="width:100vw;" srcset="https://cdn02.plentymarkets.com/jpx0tvae1136/item/images/127/preview/127-Sofa-2-Sitzer-Sunflower-original.jpg 740w,
https://cdn02.plentymarkets.com/jpx0tvae1136/item/images/127/secondPreview/127-Sofa-2-Sitzer-Sunflower-original.jpg 1440w,
https://cdn02.plentymarkets.com/jpx0tvae1136/item/images/127/middle/127-Sofa-2-Sitzer-Sunflower-original.jpg 1480w,
https://cdn02.plentymarkets.com/jpx0tvae1136/item/images/127/full/127-Sofa-2-Sitzer-Sunflower-original.jpg 2800w
" sizes="(max-width: 370px) 370px, (max-width: 720px) 720px, (max-width: 740px) 740px, (max-width: 1400px) 1400px" data-v-inspector="app.vue:26:7"
Here is a public codepen to exemplify. (feel free to play with example)
https://codesandbox.io/p/devbox/7t824m
https://7t824m-3000.csb.app/
But with nuxtimg,same parameters, can’t obtain the same behaviour on the 3 breakpoints.
What i tried:
-using min-width,changing the dpr.
Any suggestion or ideea is welcomed.
Desired behaviour:
fetch images on specified breakpoints when resizing viewport (open network tab to check and resize viewport)
On retina display it works:(0-370: preview image), (370-720: secondPreview image), (720-740: middle image), (740-1400 full image)
rendered correct html like this:
img style="width:100vw;" srcset="https://cdn02.plentymarkets.com/jpx0tvae1136/item/images/127/preview/127-Sofa-2-Sitzer-Sunflower-original.jpg 740w,
https://cdn02.plentymarkets.com/jpx0tvae1136/item/images/127/secondPreview/127-Sofa-2-Sitzer-Sunflower-original.jpg 1440w,
https://cdn02.plentymarkets.com/jpx0tvae1136/item/images/127/middle/127-Sofa-2-Sitzer-Sunflower-original.jpg 1480w,
https://cdn02.plentymarkets.com/jpx0tvae1136/item/images/127/full/127-Sofa-2-Sitzer-Sunflower-original.jpg 2800w
" sizes="(max-width: 370px) 370px, (max-width: 720px) 720px, (max-width: 740px) 740px, (max-width: 1400px) 1400px" data-v-inspector="app.vue:26:7"
Here is a public codepen to exemplify. (feel free to play with example)
https://codesandbox.io/p/devbox/7t824m
https://7t824m-3000.csb.app/
But with nuxtimg,same parameters, can’t obtain the same behaviour on the 3 breakpoints.
What i tried:
-using min-width,changing the dpr.
Any suggestion or ideea is welcomed.
