Vue项目中通过自定义组件传递本地图片路径导致图片不显示

把本地图片的相对路径字符串直接当props传递时，Vite/Webpack这类构建工具不会对该字符串做资源转译处理，整个流程没有语法问题，所以不会触发控制台报错，但最终图片无法显示：

• 直接在模板<img>标签里硬编码写src="../assets/lens.png"时，构建器会自动识别这段路径，把它替换成打包后带哈希的可访问资源路径，自动补全资源加载逻辑
• 当你把同一段路径作为普通字符串值传给props时，它只是一段无特殊标记的纯文本，构建器完全不会扫描这段字符串的内容做转译；运行时浏览器会按照当前页面的路由URL去解析这段相对路径，自然找不到对应的图片资源

解决方法 #

1. 父组件侧提前导入图片资源，将导入结果作为props传值 #

这是兼容性最好、适用所有构建工具的方案，不需要额外调整项目目录结构：

1. 在SideMenu组件的script逻辑里，先通过ES Module的import语法把图片资源引入，拿到构建器处理后的正确可访问路径
2. 把导入的变量绑定到SideMenuButton的imgPath属性上，而不是直接传静态字符串
   参考代码：

<template>
    <div id="side-menu">
        <SideMenuButton :imgPath="lensIcon"/>
    </div>
</template>

<script>
import SideMenuButton from './SideMenuButton.vue'
// 导入本地图片，自动获得打包后的正确路径
import lensIcon from '../assets/lens.png'

export default {
    name: "SideMenu",
    components:{
        SideMenuButton
    },
    data() {
        return {
            lensIcon
        }
    }
}
</script>

2. Vite项目简化方案：将静态资源移入public目录 #

如果不想逐次import图片，可以把需要使用的本地静态资源移动到项目根目录的public文件夹下：

• public目录下的资源不会被构建器做哈希重命名，会原封不动输出到打包结果的根目录
• 传值时写以/开头的绝对路径，比如/lens.png，即使作为普通字符串传给props也能被浏览器正确访问
  注意：这类资源不会被构建器做缓存优化，更适合使用频率高、变动少的公共静态资源

3. Webpack项目简化方案：用require包裹路径 #

如果是Webpack构建的项目，不需要单独写import语句，直接在传值时用require包裹路径，强制让构建器识别该路径为需要转译的静态资源：

<!-- 注意必须绑定动态属性，不能传静态字符串 -->
<SideMenuButton :imgPath="require('../assets/lens.png')"/>

快速排查技巧 #

打开浏览器开发者工具，查看Elements面板中渲染出来的img标签的实际src属性值：如果src显示的是../assets/lens.png这类原始的手写字符串，就说明没有走构建器的资源转译逻辑，完全符合上述问题的特征。

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