本文记录了我在开发 Electron + Vue 3 应用时遇到的一次典型“打包后图片不显示”的问题，并分享解决方法，避免踩坑。

背景：自定义标题栏组件传入 Logo 图片

在我的 Electron 应用中，我使用了一个自定义的 HeaderBar.vue 组件，并通过 props.logo 动态传入一张 logo 图片路径，用于展示在标题栏左侧：

<HeaderBar :logo="'@/assets/logo.png'" />

组件中这么用：

<img :src="logo" class="logo" />

在开发（npm run dev）模式下一切正常，图片能正常显示。但在打包（npm run build）并运行产物时，Logo 图片却无法显示。

问题表现

打包运行后，打开 DevTools 控制台发现：

GET file:///.../dist/@/assets/logo.png 404 (Not Found)

而直接写死路径或在 img 标签中写静态地址却能正常工作。

原因分析：静态资源路径未被构建工具识别

这是由于我使用的 Vite 的打包机制决定的：

props.logo 是一个字符串，打包工具无法识别它引用了实际的图片文件，因此它不会被打包到 dist/assets 中，也不会替换为正确的路径。

而如果使用 <img src="@/assets/logo.png"> 或 import logoUrl from '@/assets/logo.png'，构建工具就会处理它、拷贝图片并重写路径

正确解决方式

方法一：使用 import 显式引入图片资源

import logoUrl from '@/assets/logo.png'

然后传入组件：

<HeaderBar :logo="logoUrl" />

组件中照常使用：

<img :src="logo" />

这样的话就可以同时兼容 dev 和 build，而且图片会被打包到 dist/assets，在打包时路径也会自动被替换为 hash 文件名

方法二：将图片放入 public/ 目录

将图片放入 public/logo.png

传入路径为：/logo.png

注意路径前一定要加 /，表示根路径，否则打包后仍可能找不到。