Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nuxt Picture ignores width in request

See original GitHub issue

When I set the width for <nuxt-img>, it will make a request passing the corresponding width (two.jpg?w=200). However, when I tried it with <nuxt-picture>, it seems to ignore this and pass some larger width (one.jpg?w=1536).

<nuxt-picture src="img/one.jpg" width="200" />
<nuxt-img src="img/two.jpg" width="200" />

Not sure if this is a bug 🐛 or this is the expected behaviour 🤔. If it’s the latter, is there any suggestion on how I can set the width when using <nuxt-picture>, so it’s passed in the request. (ie. one.jpg?w=200&f=webp)? Thanks 🙂

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

pi0commented, May 14, 2021

Hi @NavaneethVijay. I’ve made #268 to avoid scaling up generated widths in srcset. Reason we keep width / height props in rendered HTML, is to hint browser about aspect ratio (before original image getting loaded, browser can preserve space, without them it can’t and leads to layout shift)

1reaction

NavaneethVijaycommented, May 13, 2021

@samanthaming <nuxt-picture> generates a picture tag with source and img tag with predefined screen sizes mentioned here Module Options. Since your screen size falls under 1536px you are seeing the request sent for 1536. while the width=200 is applied to the img tag rather than the image resource. Not sure if <nuxt-picture> can make sense with width and height options.

Top Results From Across the Web

nuxt-img

Automatically resizes images based on width and height; Generates responsive sizes when providing sizes option; Supports native lazy loading as well as other...

Nuxt/Image - what is the difference in fit="inside/outside"

In the network tab, you can see that the size is quite different (the order of the images is conserved). enter image description...

Nuxt Configuration Reference

Nuxt tries to resolve each item in the modules array using node require path (in node_modules ) and then will be resolved from...

Routing and Route Protection in Server-Rendered Vue Apps ...

The image above shows a simple front end app with some text. ... Nuxt.js is a tool in the Vue ecosystem that you...

20 Nuxt Modules You Can Use to Build Web Apps Faster

This is why we can use them to extend our Nuxt application by ... Now you can easily change a button size from...