Vue.js自定义Icon组件图片不显示问题求助

问题本质 #

你遇到的核心问题是：webpack只会解析模板中静态写死的src路径，动态传入的字符串路径不会被自动处理。父组件里把@/assets/icons/header/icon1.svg作为字符串传给子组件后，子组件动态绑定:src时，浏览器会直接请求这个未被webpack解析的原始字符串路径，自然找不到资源。而你在Header组件里直接写的静态src，webpack会提前将其替换为构建后的正确资源URL，所以能正常显示。

两种可行解决方法 #

方法1：父组件提前用require处理路径 #

在HeaderComponent的imageUrls中，用require()包裹图片路径，让webpack提前解析资源并生成正确的URL，再传给子组件：

// HeaderComponent.vue
<script>
import IconComponent from '@/components/layout/iconComponent.vue'

export default {
    name: 'HeaderComponent',
    components: {
        IconComponent
    },
    data() {
        return {
            imageUrls: [
                // 用require包裹路径，webpack会自动解析
                { src: require('@/assets/icons/header/icon1.svg'), alt: '功能图标' },
            ],
        };
    },
};
</script>

方法2：子组件统一处理路径（父组件只需传路径字符串） #

如果希望父组件只传入路径字符串，可在子组件中添加方法动态解析路径：

// IconComponent.vue
<template>
    <div class="icon d-flex justify-content-center align-items-center ">
        <img v-for="image in images" :key="image.src" :src="resolveImagePath(image.src)" :alt="image.alt || '图标'" class="icon_class" />
    </div>
</template>

<script>
export default {
    name: 'IconComponent',
    props: {
        images: {
            type: Array,
            required: true,
            default: () => [],
        },
    },
    methods: {
        resolveImagePath(src) {
            // 兼容带@/和不带的路径格式
            const path = src.startsWith('@/') ? src.slice(2) : src;
            return require(`@/${path}`);
        }
    }
};
</script>

此时父组件的imageUrls可以保持原来的写法：

imageUrls: [
    { src: '@/assets/icons/header/icon1.svg', alt: '功能图标' },
],

额外注意点 #

• 记得给每个image对象补充alt属性，你的代码里当前imageUrls缺少该字段，会导致图片alt为空。
• 静态图片直接写在模板src中时，Vue会自动触发webpack的路径解析，这也是Header组件内直接用img能正常显示的原因。

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