问题现象
在使用 Tauri + Vue3 开发桌面应用时，开发者经常会遇到这样一个问题：开发环境（tauri dev）下图片显示一切正常，但构建打包后（tauri build），应用中的本地图片却变成了空白或显示加载失败。这些图片可能是静态资源（如 logo、背景图），也可能是通过路径动态加载的本地文件。
根本原因分析
问题的核心在于打包前后应用运行环境和资源解析方式的差异：
- 开发环境：Vite 开发服务器直接提供文件服务，相对路径图片由 Vite 处理，资源通常从项目根目录或
public目录提供。 - 生产环境（打包后）：Tauri 将前端资源打包为 Web 视图可访问的静态文件，运行在
tauri://localhost或https://tauri.localhost协议下。直接写在 HTML 或 CSS 中的相对路径可能指向了不存在的文件系统位置，而通过文件系统路径引用的本地图片（如C:\Users\...）由于 WebView 的安全策略无法直接访问。 - 资源协议转换：Tauri 提供了
asset协议和convertFileSrc方法来安全地加载本地文件，但在 Vue 组件中若直接使用原生路径，打包后这些路径会失效。
解决方案一：将静态资源放入 public 目录
最直接的方式是将不参与构建处理的静态图片放入 Vue 项目根目录的 public 文件夹中。打包时，Tauri 会将该目录下的内容原样复制到最终产物中，并通过绝对路径引用。
操作步骤：
- 在项目根目录下创建
public文件夹（如果尚不存在）。 - 将图片文件放入该目录，例如
public/images/logo.png。 - 在 Vue 组件中通过绝对路径引用：
<img src="/images/logo.png" />。
这种方式适用于不需要动态更改的静态资源，如应用图标、默认背景图等。
解决方案二：使用 Vite 的 import 或 new URL 动态导入
对于需要在 <template> 或 <script> 中动态绑定的图片，可以通过 Vite 的静态资源处理机制来保证打包后路径正确。
方法1：import 导入
<template> <img :src="imgSrc" alt="动态图片" /> </template> <script setup> // 通过 import 将图片作为模块导入，Vite 会返回打包后的正确路径 import imgSrc from '../assets/my-image.png'; // 也可使用 import imgSrc from '/src/assets/my-image.png'; </script>
方法2：使用 new URL 结合 import.meta.url
当图片路径是动态变量时，可以使用以下语法：
<script setup>
const getImageUrl = (name) => {
return new URL(`../assets/${name}.png`, import.meta.url).href;
};
</script>注意：该方法要求路径参数必须是静态可分析的，Vite 会在构建时进行转换。如果完全动态（例如从后端获取的文件名），则需要结合其他方案。
解决方案三：加载本地文件系统中的图片
如果你的应用需要展示用户电脑上的本地图片（如通过绝对路径 /home/user/photo.png 或 C:\Users\photo.png），直接设置 src 会因 WebView 安全限制而失败。此时必须使用 Tauri 提供的 convertFileSrc 将文件系统路径转换为安全的资源路径。
步骤如下：
- 安装依赖（若未安装
@tauri-apps/api）：
npm install @tauri-apps/api
- 在 Vue 组件中使用：
<template>
<img :src="displaySrc" alt="本地图片" />
</template>
<script setup>
import { convertFileSrc } from '@tauri-apps/api/tauri';
const localPath = 'C:\\Users\\Public\\Pictures\\sample.jpg'; // 实际路径可能来自对话框或配置
const displaySrc = convertFileSrc(localPath);
</script>重要说明：
convertFileSrc会将路径转换为类似https://asset.localhost/path/to/file.jpg的格式，Tauri 内部会通过自定义协议加载该文件。- 必须确保在
tauri.conf.json的安全配置中允许该协议。默认配置已包含对asset协议的支持，通常无需额外修改。若自定义了安全策略，需要检查csp是否限制了img-src。
解决方案四：检查 CSP 与协议配置
在某些情况下，即使使用了 convertFileSrc，图片仍可能因内容安全策略（CSP）被阻止。可在 tauri.conf.json 中调整安全设置：
{
"tauri": {
"security": {
"csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
}
}
}上述配置显式允许了 asset: 协议和本地资源域名，确保图片能够加载。
常见错误排查清单
- 路径拼写错误：检查大小写和分隔符（Windows 路径需转义反斜杠或使用正斜杠）。
- 未使用 convertFileSrc：直接传递系统路径给
src属性，打包后必定失败。 - public 目录下的图片未被打包：确保构建命令执行正常，且资源位于正确的
public目录下（与src平级）。 - 动态路径无法分析：使用
new URL时路径变量若完全运行时决定，构建时会警告并可能失败，此时需回退到public方案或使用后端读取。
总结
Tauri + Vue3 应用中本地图片打包后无法显示的根源在于资源路径解析与安全性限制。根据图片类型选择对应的解决方案：
- 静态资源放
public目录，用绝对路径引用； - 组件内图片使用
import或new URL让 Vite 处理； - 本地文件系统图片必须通过
convertFileSrc转换路径。
遵循上述实践，即可确保开发与生产环境图片加载一致，避免“打包后才出问题”的尴尬。