Vue3项目构建时JSON传入的动态图片缺失问题求助

方案1：用public目录存图片 #

• 把JSON里要用到的图片全放到项目根目录的public文件夹（没有就新建）
• JSON里的图片路径直接写根相对路径，比如"/images/avatar.jpg"
• 构建时public会完整复制到dist根目录，本地开发和GitHub Pages部署后都能直接访问，完全不用手动处理

方案2：动态导入图片资源 #

• 保持JSON里的图片路径为相对组件的路径（比如"./assets/img/banner.png"），然后在组件里处理数据时用new URL转成可被打包的资源：

  import contentData from '@/data/your-content.json'
  
  // 处理每个带图片的项
  const processedContent = contentData.map(item => {
    return {
      ...item,
      imgUrl: new URL(item.imgUrl, import.meta.url).href
    }
  })
  

• 这样Vite会自动识别这些图片并打包，构建后路径也会自动适配

方案3：配置Vite强制识别图片资源 #

• 在vite.config.js里添加assetsInclude，让Vite把指定格式的图片都纳入打包范围：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    // 把你用到的图片格式都加上
    assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.webp', '**/*.gif']
  })
  

• 配合方案2的new URL用法，就能确保JSON里的图片被正确打包

方案4：用插件自动复制图片 #

• 安装vite-plugin-static-copy插件：npm install vite-plugin-static-copy --save-dev
• 在vite.config.js里配置要复制的图片目录：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import { viteStaticCopy } from 'vite-plugin-static-copy'
  
  export default defineConfig({
    plugins: [
      vue(),
      viteStaticCopy({
        targets: [
          {
            src: 'src/assets/json-images/**/*', // 你的图片存放路径
            dest: 'images' // 复制到dist下的images文件夹
          }
        ]
      })
    ]
  })
  

• JSON里的图片路径写"/images/xxx.jpg"，构建时插件会自动把图片复制到对应位置

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