NuxtJS从JSON加载图片失败问题求助

核心前提：区分Nuxt版本 #

Nuxt 2和Nuxt 3的静态资源目录规则完全不同，先对应你的版本调整：

Nuxt 3 解决方案 #

1. 图片存放目录：将download.jpeg放到项目根目录的/public文件夹下（不要嵌套子目录）
2. 确认Image模块已配置：在nuxt.config.ts中确保添加@nuxt/image模块：

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

3. 正确使用NuxtImg：直接用根路径开头的src，不要加@或~前缀：

   <NuxtImg src="/download.jpeg" alt="博客预览图" />
   

Nuxt 2 解决方案 #

1. 图片存放目录：将download.jpeg放到项目根目录的/static文件夹下
2. 安装并配置Image模块：先安装依赖，再配置到nuxt.config.js：

   npm install @nuxt/image-module
   

   export default {
     modules: ['@nuxt/image-module']
   }
   

3. 正确使用NuxtImg：同样用根路径开头的src：

   <nuxt-img src="/download.jpeg" alt="博客预览图" />
   

若需使用/assets目录存放图片 #

不管Nuxt版本，都需要用别名路径引用，同时确保Image模块能解析：

• Nuxt 3写法：

  <NuxtImg src="~/assets/download.jpeg" alt="博客预览图" />
  

  并在nuxt.config.ts中添加别名配置：

  export default defineNuxtConfig({
    image: {
      alias: {
        assets: '/assets'
      }
    }
  })
  

• Nuxt 2写法：

  <nuxt-img src="@/assets/download.jpeg" alt="博客预览图" />
  

常见坑排查 #

• 路径错误：不要写成download.jpeg（相对路径），必须以/开头（根路径）
• 缓存问题：停止Nuxt服务，删除.nuxt和node_modules/.cache目录，再重新启动开发服务
• 模块未安装：忘记安装@nuxt/image相关依赖，导致组件无法正常解析资源路径

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