#[kapa.ai] When using NuxtImg, the img changes the size abruptly, when zooming in.

6 messages · Page 1 of 1 (latest)

dusky domeBOT
#

Hi @simple cape. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

When using <NuxtImg> with a remote image like <https://dummyimage.com/2000x500/000/fff,> the image may change size abruptly (causing layout shift) if you do not specify the width and height props. By default, <NuxtImg> outputs a native <img> tag, and without explicit dimensions, the browser does not know the image's aspect ratio before it loads, leading to abrupt resizing as the image loads in the DOM.

How to prevent abrupt resizing:

Specify the width and height props on your <NuxtImg> component. This will reserve the correct space for the image and prevent layout shift:

<NuxtImg
  src="<https://dummyimage.com/2000x500/000/fff">
  width="2000"
  height="500"
/>

This approach ensures the browser can allocate the correct space for the image before it loads, resulting in a smoother experience without abrupt size changes. This is a recommended best practice for performance and user experience in Nuxt apps using Nuxt Image NuxtImg usage Nuxt performance best practices.

If you want to display the image at a different size, you can set the width and height to your desired display dimensions, and Nuxt Image will handle resizing and optimization.

Summary:
Always set width and height on <NuxtImg> to avoid abrupt size changes when images load.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@simple cape Kapa.ai is still learning and improving, please let me know how I did by reacting below.

#

Let me check the knowledge base for you again. One moment! :books:

#

You're correct to question this—according to the official documentation, <NuxtImg> is designed as a drop-in replacement for the native <img> tag and, by default, outputs a native <img> element directly, without any wrapper around it. The documentation states:

<NuxtImg> outputs a native img tag directly (without any wrapper around it). Use it like you would use the <img> tag:

<NuxtImg src="/nuxt-icon.png" />

Will result in:

<img src="/nuxt-icon.png">

NuxtImg usage

However, the difference in behavior you observe (abrupt resizing with <NuxtImg>, but not with <img>) is likely due to how Nuxt Image handles image optimization, responsive attributes, and possibly the absence of explicit width and height props. When you use <NuxtImg>, it may generate additional attributes (like srcset, sizes, etc.) or apply styles that differ from a plain <img>, especially if you haven't set fixed dimensions.

The documentation emphasizes that specifying width and height is important to prevent layout shifts and abrupt resizing, particularly with optimized or remote images NuxtImg usage. The native <img> may behave differently if the browser can infer the image's aspect ratio from the URL or if the image loads quickly enough.

In summary:

  • By default, <NuxtImg> outputs a native <img> tag.
  • The abrupt resizing is likely due to missing width and height props, which are especially important for optimized images.
  • The native <img> may not show the same issue if the browser can infer the size or if the image loads instantly.
#

If you want <NuxtImg> to behave like <img> in terms of layout stability, always specify width and height props NuxtImg usage.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: