Vue.js图片无法显示求助：带WAI-ARIA的可复用组件开发问题

问题核心在于Vue对静态资源的处理逻辑和React不同：直接传递相对路径字符串给子组件的src属性时，webpack不会自动解析该路径，导致浏览器无法找到图片资源。以下是具体解决方法：

方法一：父组件导入图片后传递（推荐） #

在父组件中先通过import导入图片资源，再将导入后的变量传给子组件，webpack会自动处理资源路径：

<template>
    <header>
            <ImageComp :imageName="logoImage" imageAlt="****** Logo"
                ARIAText="This is the logo of *****. Dit is het logo van ******" />
    </header>
</template>

<script>
import ImageComp from './ImageComp.vue';
// 导入图片资源
import logoImage from '../assets/icons/logo.png';

export default {
    name: 'TopBanner',
    components: {
        ImageComp,
    },
    data() {
        return {
            logoImage
        }
    }
    // 移除多余的props定义：父组件并未从外部接收这些属性，无需声明
};
</script>

方法二：子组件用require动态解析路径 #

如果需要动态传递图片路径，可在子组件中通过require解析路径：

修改子组件的img标签：

<template>
    <div>
        <img :src="require(`@/${imageName}`)" :alt="imageAlt" />
        <span aria-label="imagecontent" role="contentinfo" class="aria">{{ ARIAText }}</span>
    </div>
</template>

父组件传递路径时去掉开头的../，改用相对于src目录的路径：

<ImageComp imageName="assets/icons/logo.png" imageAlt="****** Logo" ... />

（@在Vue项目中默认指向src目录）

方法三：将图片放入public目录 #

把图片放到项目根目录的public文件夹（如public/icons/logo.png），直接用绝对路径引用：
父组件传递路径改为：

<ImageComp imageName="/icons/logo.png" imageAlt="****** Logo" ... />

这种方式下webpack不会处理该资源，会直接复制到打包后的dist目录中。

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