Lzh on GitHub

安装

在 Nuxt 项目中使用 image 模块只需一个命令。
您正在阅读与 Nuxt 3 兼容的 v1 文档。:br 请访问 v0.image.nuxtjs.org 获取与 Nuxt 2 兼容的版本。（公告）。

自动安装

要开始使用，请将 @nuxt/image 添加到您的项目中：

npx nuxi@latest module add image

手动安装

将 @nuxt/image 依赖项添加到您的项目中：

npm i @nuxt/image

然后，将其添加到 nuxt.config 中的 modules：

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/image'
  ]
})

配置

在您的 nuxt.config 中添加一个 image 部分：

nuxt.config.ts
export default defineNuxtConfig({
  image: {
    // Options
  }
})
请查看 图像配置 以获取所有可用选项和自定义功能。

边缘通道(指代预发布版本通道)

每次提交合并到 @nuxt/image 的 main 分支并 通过所有测试 后，我们都会使用 GitHub Actions 触发自动化 npm 发布，发布 @nuxt/image-nightly 包。

您可以选择使用此发布通道，避免等待下一个版本，并通过测试更改来帮助模块。

边缘版本的构建和发布方法以及质量与稳定版本相同。唯一的区别是您应该经常检查 GitHub 仓库 以获取更新。在审查过程和自动化测试中，仍有轻微的回归未被发现的可能性。因此，我们内部使用此通道在每次发布前进行双重检查。

选择加入边缘通道

更新 package.json 中的 @nuxt/image 依赖项：

package.json
{
  "devDependencies": {
-   "@nuxt/image": "^1.0.0"
+   "@nuxt/image": "npm:@nuxt/image-nightly@latest"
  }
}

删除 lockfile（package-lock.json、yarn.lock 或 pnpm-lock.yaml）并重新安装依赖项。

退出边缘通道

更新 package.json 中的 @nuxt/image 依赖项：

package.json
{
  "devDependencies": {
-   "@nuxt/image": "npm:@nuxt/image-nightly@latest"
+   "@nuxt/image": "^1.0.0"
  }
}

删除 lockfile（package-lock.json、yarn.lock 或 pnpm-lock.yaml）并重新安装依赖项。

故障排除

如果安装过程中发生错误：

npm up @nuxt/image
  • 尝试重新创建 lockfile：
npx nuxi@latest upgrade --force
  • 如果仍然出现与 sharp 和 node-gyp 相关的错误，那很可能是因为您的操作系统架构或 NodeJS 版本未包含在预构建二进制文件中，需要从源代码构建（例如，Apple M1 上有时会发生这种情况）。请查看 node-gyp 了解安装要求。
  • 如果以上方法均无效，请 提出问题 并附上错误追踪、操作系统、Node 版本以及用于安装的包管理器。