Vue.js自定义组件无法找到img src路径的问题求助

• 问题根源
  Webpack/Vite在构建时会对@/assets/这类静态资源路径做解析，将文件复制到输出目录并替换为打包后的路径。但动态拼接的字符串（比如${props.styling}/${props.icon}.svg）属于运行时生成的内容，构建工具无法提前识别并处理，最终导致路径指向不存在的文件。

• 解决方案1（Webpack环境，Vue 2/3）
  使用require让构建工具提前扫描并处理资源：

  <template>
    <img :src="iconSrc" alt="自定义图标" />
  </template>
  
  <script>
  export default {
    props: {
      styling: {
        type: String,
        required: true
      },
      icon: {
        type: String,
        required: true
      }
    },
    computed: {
      iconSrc() {
        // 动态拼接路径并通过require引入，Webpack会解析对应资源
        return require(`@/assets/${this.styling}/${this.icon}.svg`)
      }
    }
  }
  </script>
  

  注意：这种方式会让Webpack打包所有匹配@/assets/*/*.svg的文件，确保运行时不会出现缺失。

• 解决方案2（Vite环境，Vue 3）
  用new URL结合import.meta.url解析绝对路径：

  <template>
    <img :src="iconSrc" alt="自定义图标" />
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  const props = defineProps({
    styling: String,
    icon: String
  })
  
  const iconSrc = computed(() => {
    return new URL(`../assets/${props.styling}/${props.icon}.svg`, import.meta.url).href
  })
  </script>
  

  Vite会通过import.meta.url定位当前组件的位置，进而正确解析资源的绝对路径。

• 额外注意

  • 确认styling和icon传递的参数与实际文件路径、文件名完全匹配（服务器环境通常区分大小写）
  • 静态路径能正常显示是因为构建工具在打包阶段已经完成了路径解析和替换

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