Nuxt3：Nuxt 图像 - 无法解析组件：nuxt-img

Question

我一直在尝试在 Nuxt3 应用程序上使用 Nuxt-image 模块，但无法让它工作。因为我收到以下错误：

Failed to resolve component: nuxt-img

我按照官方文档的安装指南进行操作：https://v1.image.nuxtjs.org/get-started

我运行了

npm install -D @nuxt/image-edge

，现在我的 package.json 看起来像这样：

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/image-edge": "^1.0.0-27919678.2f5b64b",
    "@nuxtjs/tailwindcss": "^6.1.3",
    "nuxt": "3.0.0",
    "nuxt-purgecss": "^2.0.0",
    "sass": "^1.56.1",
    "vite-plugin-vuetify": "^1.0.1",
    "vuetify": "^3.0.4"
  },
  "dependencies": {
    "@mdi/font": "^7.1.96",
    "@nuxtjs/apollo": "^5.0.0-alpha.4",
    "@pinia/nuxt": "^0.4.4",
    "@vueuse/nuxt": "^9.5.0",
    "lazysizes": "^5.3.2",
    "locomotive-scroll": "^4.1.4",
    "nuxt-lodash": "^2.4.1",
    "nuxt-swiper": "^0.1.6",
    "swiper": "^8.4.5",
    "vue-silentbox": "^3.0.2"
  }
}

然后我将 Nuxt Image 添加到我的

nuxt.config.ts

:

modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/apollo',
    '@vueuse/nuxt',
    '@nuxt/image-edge',
    [
        '@pinia/nuxt',
        {
            autoImports: ['defineStore', 'acceptHMRUpdate'],
        }
    ],
    'nuxt-swiper',
    'nuxt-lodash'
],

最后我添加了图像配置（我也尝试将其留空）：

image: {
    dir: 'assets/images'
}

其他人也遇到过这个错误吗？我可以让它工作吗？

Answer 1

以防对其他人有帮助：

我的 nuxt 版本

3.0.0

不兼容，你至少需要

3.1.0

Answer 2

如果您使用 nuxt3，我建议将您的 Nuxt 应用程序更新到稳定版本 3.7 并使用 @nuxt/image@rc

按照此文档nuxt-image进行设置和安装

如果您使用静态图像，请确保将其放在公共目录中以确保其在生产中正常工作