Nuxt-img资源路径不存在，nuxt-image组件报404错误求助

无法使用nuxt-image组件，出现404资源未找到错误，推测该问题可能与配置相关，但查阅文档和教程后仍未解决，特此求助。相关信息如下：

nuxt.config.js配置 #

export default {
  ssr: false,
  css: ['~/assets/styles/main.scss'],
  plugins: [
    {
      src: '~/plugins/locomotive.js',
      ssr: false,
    },
  ],
  loading: '~/components/Loading.vue',
  modules: ['@nuxt/http', '@nuxtjs/robots', '@nuxt/image'],

  image: {
    presets: {
      imgMin: {
        modifiers: {
          format: 'webp',
          fit: 'cover',
          quality: '60',
        },
      },
    },
  },

  robots: {
    UserAgent: '*',
    Disallow: '/admin',
    Allow: '/',
  },
  buildModules: ['@nuxtjs/style-resources', '@nuxtjs/google-analytics'],
  pageTransition: 'fade',
}

package.json #

（对应截图：package.json截图）

页面组件代码 #

<nuxt-img src="~/assets/medias/img/home/1.png" alt="image" preset="imgMin" />

错误截图 #

（对应截图：404错误截图）

可能的解决方法 #

• 验证本地图片路径：确认~/assets/medias/img/home/1.png文件真实存在，注意路径大小写（Linux/macOS环境区分大小写）
• 配置静态资源处理器：在静态模式（ssr: false）下，Nuxt Image需要指定本地处理驱动，修改nuxt.config.js的image配置：

  image: {
    presets: {
      imgMin: {
        modifiers: {
          format: 'webp',
          fit: 'cover',
          quality: '60',
        },
      },
    },
    provider: 'static', // 指定静态资源处理provider
    domains: ['localhost'] // 允许本地域名
  }
  

• 检查依赖兼容性：确认@nuxt/image版本与当前Nuxt版本匹配，可尝试升级或降级到兼容版本
• 简化代码排查：先移除preset属性，使用基础标签测试是否能加载图片，排查是否为预设配置问题：

  <nuxt-img src="~/assets/medias/img/home/1.png" alt="image" />
  

• 清理缓存重启：删除.nuxt文件夹与node_modules/.cache目录，重新执行npm install和npm run dev

内容的提问来源于stack exchange，提问作者Kellig