<NuxtImg> - Nuxt 图片

如果你省略屏幕尺寸前缀（如 sm:），则此尺寸是图片的“默认”尺寸。否则，Nuxt 将选择最小的尺寸作为图片的默认尺寸。
此默认尺寸一直使用到下一个指定的屏幕宽度，依此类推。每个指定的尺寸对都向上应用 - 因此 md:400px 表示图片在 md 屏幕及其以上屏幕上将被设置为 400px 大小。

示例

<NuxtImg
  src="/logos/nuxt.png"
  sizes="100vw sm:50vw md:400px"
/>

`densities`

为了为具有更高像素密度的屏幕生成图片的特殊版本。

示例

<NuxtImg
  src="/logos/nuxt.png"
  height="50"
  densities="x1 x2"
/>
<!--
<img
  src="/_ipx/w_50/logos/nuxt.png" 
  srcset="/_ipx/w_100/logos/nuxt.png x2"
/>
-->

`placeholder`

在实际图片完全加载之前显示占位符图片。

占位符道具可以是字符串、布尔值、数字或数组。下面展示了每种情况的用法。

<!-- Automatically generate a placeholder based on the original image -->
<NuxtImg src="/nuxt.png" placeholder />

<!-- Set a width, height for the automatically generated placeholder  -->
<NuxtImg src="/nuxt.png" :placeholder="[50, 25]" />

<!-- Set a width, height, quality & blur for the automatically generated placeholder  -->
<NuxtImg src="/nuxt.png" :placeholder="[50, 25, 75, 5]" />

<!-- Set the width & height of the automatically generated placeholder, image will be a square -->
<NuxtImg src="/nuxt.png" :placeholder="15" />

<!-- Provide your own image -->
<NuxtImg src="/nuxt.png" placeholder="./placeholder.png" />

你也可以利用 useImage() 根据原始图片生成占位符图片，如果源是 SVG 或者你想要更好地控制修饰符，这将非常有用。

<script setup>
const img = useImage()
</script>

<template>
  <NuxtImg :placeholder="img(`/nuxt.svg`, { h: 10, f: 'png', blur: 2, q: 50 })" src="/nuxt.svg`" />
</template>

`placeholder-class`

当使用占位符时，你可以使用 placeholder-class 为原始底层的 <img> 元素（在占位符呈现时）应用一个类。

<!-- Apply a static class to the original image -->
<NuxtImg src="/nuxt.png" placeholder placeholder-class="custom" />

<!-- Apply a dynamic class to the original image -->
<NuxtImg src="/nuxt.png" placeholder :placeholder-class="custom" />

如果你需要仅对已加载的图片应用一些 CSS，你可以使用类似以下内容：

img:not(.my-placeholder-class) {
  /* styles here */
}

`provider`

使用其他提供者，而不是在 nuxt.config 中指定的默认提供者选项

示例

<template>
  <NuxtImg
    provider="cloudinary"
    src="/remote/nuxt-org/blog/going-full-static/main.png"
    width="300"
    height="169"
  />
</template>

`preset`

预设是预定义的图片修饰符集合，可用于在项目中创建统一形式的图片。

我们可以在 nuxt.config 中使用 presets 选项来定义预设。

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

`format`

如果你想以特定格式提供图片，请使用此道具。

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

可用的格式有 webp、avif、jpeg、jpg、png、gif 和 svg。如果未指定格式，它将尊重默认图片格式。

`quality`

生成的图片的质量。

<NuxtImg src="/nuxt.jpg" quality="80" width="200" height="100" />

`fit`

属性 fit 指定图片的大小。你可以使用此属性的五个标准值。

cover: (默认) 保持纵横比，确保图片通过裁剪/剪切以适应提供的两个尺寸来覆盖这两个尺寸。
contain: 保持纵横比，根据需要使用“字母盒”将图片包含在提供的两个尺寸内。
fill: 忽略输入的纵横比，并拉伸到提供的两个尺寸。
inside: 保持纵横比，调整图片大小，使其尽可能大，同时确保其尺寸小于或等于指定的两个尺寸。
outside: 保持纵横比，调整图片大小，使其尽可能小，同时确保其尺寸大于或等于指定的两个尺寸。

<NuxtImg fit="cover" src="/nuxt-icon.png" width="200" height="100" />

一些提供者支持其他值。

`modifiers`

除了标准修饰符之外，每个提供者可能还有自己的附加修饰符。由于这些修饰符取决于提供者，请参阅其文档以了解可以使用的内容。

使用 modifiers 道具可以让你使用任何这些转换。

示例

<NuxtImg
  provider="cloudinary"
  src="/remote/nuxt-org/blog/going-full-static/main.png"
  width="300"
  height="169"
  :modifiers="{ roundCorner: '0:100' }"
/>

`preload`

如果你想预加载图片，请使用此道具。这将把一个相应的 link 标签放置在页面的头部。

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

`loading`

这是一个原生属性，它为浏览器提供关于如何处理视窗之外的图片加载的提示。它支持自 2022 年 3 月以来所有主要浏览器的最新版本。

设置 loading="lazy" 以推迟图片加载，直到它出现在视窗中。

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

`nonce`

这是一个原生全局属性，它定义一个加密 nonce（一次性使用的数字），可以由内容安全策略用于确定是否允许给定元素的给定提取进行。提供 nonce 允许你避免使用 CSP unsafe-inline 指令，该指令将允许列入白名单所有内联脚本或样式。

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

<script lang="ts" setup>
// useNonce is not provided by nuxt/image but might be
// provided by another module, for example nuxt-security
const nonce = useNonce()
</script>

事件

<NuxtImg> 和 <NuxtPicture> 组件包含的 <img> 元素发出的原生事件被重新发射，可以监听。

示例： 监听来自 <NuxtImg> 的原生 onLoad 事件

<NuxtImg
  src="/images/colors.jpg"
  width="500"
  height="500"
  @load="doSomethingOnLoad"
/>

贡献

我们永远感谢你的贡献。

了解如何使用和配置 Nuxt Picture 组件。