Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Nuxt/docs/3.api/1.components/9.nuxt-img.md

1.1 KiB
Raw Blame History

title description links
<NuxtImg> Nuxt provides a <NuxtImg> component to handle automatic image optimization.
label icon to size
Source i-simple-icons-github https://github.com/nuxt/image/blob/main/src/runtime/components/nuxt-img.ts xs

<NuxtImg> is a drop-in replacement for the native <img> tag.

  • Uses built-in provider to optimize local and remote images
  • Converts src to provider-optimized URLs
  • Automatically resizes images based on width and height
  • Generates responsive sizes when providing sizes option
  • Supports native lazy loading as well as other <img> attributes

Setup

In order to use <NuxtImg> you should install and enable the Nuxt Image module:

npx nuxi@latest module add image

Usage

<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" />

::read-more{to="https://image.nuxt.com/usage/nuxt-img" target="_blank"} Read more about the <NuxtImg> component. ::