Srcset and Size when applied don’t render html as when applied on <img> tag
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the public CodeSandbox reproduction and inspecting the NuxtImg-generated HTML, responsive srcset/sizes behavior, and network requests while resizing the viewport. No project file or test is named; done means matching the native img behavior across the described breakpoints and producing the expected responsive HTML.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100