Vue3使用v-bind绑定图片路径报404，硬编码路径可正常加载

问题原因 #

Vite对静态资源的编译规则和Webpack不同：硬编码的资源路径会被Vite自动解析并纳入打包流程，而动态字符串拼接的路径无法被Vite识别，导致编译后资源路径错误，出现404。

解决方案（Options API） #

推荐两种可行的实现方式：

方式1：使用new URL动态生成资源路径

在组件的methods中定义一个生成图标URL的方法，利用Vite支持的import.meta.url来正确解析资源位置：

<script>
export default {
  data() {
    return {
      list: [
        // 你的板块列表数据，示例：{ folder: { iconName: 'Benefits_Icon.png' } }
      ]
    }
  },
  methods: {
    getIconPath(iconName) {
      // 路径根据你的项目结构调整，确保指向正确的图标目录
      return new URL(`../assets/images/icons/byCategory/${iconName}`, import.meta.url).href
    }
  }
}
</script>

<template>
  <div v-for="root in list" :key="root.id">
    <img :src="getIconPath(root.folder.iconName)" alt="板块图标" />
  </div>
</template>

方式2：提前导入图标并使用映射表

如果图标数量不多，可提前导入所有图标并维护一个映射表，直接通过图标名称获取路径：

<script>
// 提前导入所需图标
import BenefitsIcon from '@/assets/images/icons/byCategory/Benefits_Icon.png'
import OtherIcon from '@/assets/images/icons/byCategory/Other_Icon.png'

export default {
  data() {
    return {
      list: [
        // 你的板块列表数据
      ],
      iconMap: {
        'Benefits_Icon.png': BenefitsIcon,
        'Other_Icon.png': OtherIcon
      }
    }
  }
}
</script>

<template>
  <div v-for="root in list" :key="root.id">
    <img :src="iconMap[root.folder.iconName]" alt="板块图标" />
  </div>
</template>

注意事项 #

• 确保iconName的文件后缀（如.png）与实际资源完全一致
• 验证资源文件确实存在于指定的目录中
• 若使用路径别名（如@指向src），需在vite.config.js中正确配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import path from 'path'
  
  export default defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    }
  })
  

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