配置
要配置图片模块并自定义其行为，您可以在您的 nuxt.config 中使用 image 属性
export default defineNuxtConfig({
image: {
// Options
}
})
注入
默认情况下，Nuxt Image v1 采用可组合的方式。如果您不使用组件，则不会向您的包添加任何其他代码。但是，如果您希望全局初始化一个 $img 助手，该助手将在您的整个应用程序中可用，您可以这样做。
export default defineNuxtConfig({
image: {
inject: true
}
})
质量
生成的图像的质量。
您也可以使用 quality 属性 在组件级别覆盖此选项。
export default defineNuxtConfig({
image: {
quality: 80,
}
})
格式
默认值：['webp']
您可以使用此选项来配置 <NuxtPicture> 使用的图像的默认格式。可用的格式是 webp, avif, jpeg, jpg, png 和 gif。格式的顺序很重要，因为将使用浏览器支持的第一个格式。您可以传递多个值，例如 ['avif', 'webp']。
您也可以使用 format 属性 在组件级别覆盖此选项。
export default defineNuxtConfig({
image: {
format: ['webp']
}
})
屏幕
预定义屏幕尺寸列表。
这些尺寸将用于生成图像的调整大小和优化版本（例如，使用 sizes 修饰符）。
export default defineNuxtConfig({
image: {
// The screen sizes predefined by `@nuxt/image`:
screens: {
'xs': 320,
'sm': 640,
'md': 768,
'lg': 1024,
'xl': 1280,
'xxl': 1536,
'2xl': 1536
},
}
})
xs 属性。域名
要启用外部网站上的图像优化，请指定允许优化的域名。此选项将用于检测是否应优化远程图像。这对于确保外部 URL 不会被滥用是必要的。
export default defineNuxtConfig({
image: {
domains: ['nuxtjs.org']
}
})
预设
预设是为您项目预定义的配置集合。预设将帮助您统一整个项目的图像。
export default defineNuxtConfig({
image: {
presets: {
avatar: {
modifiers: {
format: 'jpg',
width: 50,
height: 50
}
}
}
}
})
提供者
为了创建和使用 自定义提供者，您需要使用 providers 选项并定义您的自定义提供者。
export default defineNuxtConfig({
image: {
providers: {
random: {
provider: '~/providers/random',
options: {}
}
}
}
})
提供者
默认值：ipx（或 ipxStatic 如果与静态 nitro 预设一起使用，例如，如果您正在运行 nuxt generate）
我们可以指定默认提供者，在组件中未指定或调用 $img 时使用。
export default defineNuxtConfig({
image: {
provider: 'twicpics',
twicpics: {
baseURL: 'https://nuxt-demo.twic.pics'
}
}
})
修饰符
您可以为所选提供者设置默认修饰符。
export default defineNuxtConfig({
image: {
provider: 'cloudinary',
cloudinary: {
baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',
modifiers: {
effect: 'sharpen:100',
quality: 'auto:best',
}
}
}
})
密度
默认值：[1, 2]
指定一个值来处理 devicePixelRatio > 1（这些是具有视网膜显示屏和其他显示屏的设备）。您必须指定要为哪些 devicePixelRatio 值调整图像。
您可以 在 MDN 上阅读有关 devicePixelRatio 的更多信息.
export default defineNuxtConfig({
image: {
densities: [1, 2, 3],
}
})
目录
默认值：public
此选项允许您在使用 ipx 或 ipxStatic 提供者时指定源图像的位置。
例如，您可能希望将源图像放在 assets/images 目录中，而不是默认的 public 目录中，以便源图像不会被复制到 dist 中并部署
export default defineNuxtConfig({
image: {
dir: 'assets/images'
}
})
注意
- 对于
ipxStatic提供者，如果图像在生成期间未被抓取（无法访问的模态、页面或动态运行时大小），则将dir从public更改为其他目录会导致 404 错误。 - 对于
ipx提供者，请确保也部署定制的dir。 - 对于某些提供者（如 vercel），使用
public/以外的目录来存放资源是不支持的，因为调整大小是在运行时进行的（而不是在构建/生成时进行），并且资源是从public/目录（部署 URL）获取的
别名
此选项允许您为 src 指定别名。
使用默认 ipx 提供者时，URL 别名在服务器端被缩短。这对于优化外部 URL 并将其不包含在 HTML 中特别有用。
使用其他提供者时，别名在运行时被解析并包含在 HTML 中。（只简化了使用方式）
示例
export default defineNuxtConfig({
image: {
domains: [
'images.unsplash.com'
],
alias: {
unsplash: 'https://images.unsplash.com'
}
}
})
在使用别名之前
<NuxtImg src="https://images.unsplash.com/<id>" />
生成
<img src="/_ipx/https://images.unsplash.com/<id>">
在使用别名之后
<NuxtImg src="/unsplash/<id>" />
生成
<img src="/_ipx/unsplash/<id>" />
使用方式和输出都得到了简化！