安装

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

npx nuxi@latest module add image

将其添加到 nuxt.config 中的 modules 中

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

您现在可以在您的应用程序中开始使用 <NuxtImg> 和 <NuxtPicture> 组件 ✨

配置

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

image: {
  // Options
}

边缘通道

每次将提交合并到 @nuxt/image 的 main 分支中并 **通过所有测试** 后，我们使用 Github Actions 触发一个自动 npm 发布，发布一个 @nuxt/image-nightly 包。

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

边缘发布的构建和发布方法以及质量与稳定版本相同。唯一的区别是您应该经常查看 GitHub 存储库 以获取更新。在审查过程和自动测试期间，可能会出现一些回归错误没有被发现。因此，我们内部使用此通道在每次发布之前对所有内容进行双重检查。

加入边缘通道

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

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

删除锁定文件 (package-lock.json、yarn.lock 或 pnpm-lock.yaml) 并重新安装依赖项。

退出边缘通道

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

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

删除锁定文件 (package-lock.json、yarn.lock 或 pnpm-lock.yaml) 并重新安装依赖项。

故障排除

如果安装期间出现错误

• 确保使用 LTS 版本的 NodeJS (NodeJS 下载页面)
• 尝试升级到最新版本
  pnpmyarnnpm

  pnpm up @nuxt/image
  

• 尝试重新创建锁定文件

  npx nuxt@latest upgrade --force
  

• 如果仍然出现与 sharp 和 node-gyp 相关的错误，这可能是因为您的操作系统体系结构或 NodeJS 版本未包含在预构建的二进制文件中，需要从源代码构建（例如，这有时会在 Apple M1 上发生）。查看 node-gyp 以了解安装要求。
• 如果上述方法均无效，请 打开一个问题 并包含错误跟踪、操作系统、Node 版本以及用于安装的包管理器。