Capacitor 打包后 HTML 里的本地图片为啥加载不出来？

恒菽提问于 2026-03-01 04:57:19 阅读 35

框架

我在用 Capacitor 打包一个 Vue 项目到 Android，本地图片在浏览器里能正常显示，但打包成 App 后就变成空白了。试过把图片放 public 目录和 assets 里都不行，路径应该没错啊。

比如下面这段代码，在 Web 端没问题，但 App 里 img 标签直接没加载：

<img src="/assets/logo.png" alt="logo" />
<!-- 也试过 ./assets/logo.png 和 ../assets/logo.png -->

我来解答赞 8 收藏

反馈

2 条解答

茂庭（打工版） Lv1

Capacitor 打包后的资源路径有时候会跟 Web 开发有差异，尤其是处理本地图片的时候。你在 Web 端用的路径在 App 里可能就不灵了。

首先，确保你的图片放在 public 目录下，然后尝试去掉路径前面的斜杠，让路径变成相对路径。这样在打包成 App 后，图片路径可以正确解析。修改后的代码如下：

img src="./assets/logo.png" alt="logo" />

其次，检查一下打包后的文件结构，确保图片确实被正确地复制到了 public 目录对应的输出路径中。有时候可能是构建工具配置的问题。

最后，别忘了清理缓存，有时候旧的缓存文件会导致资源加载失败。你可以尝试删除 node_modules 和 dist 目录，然后重新安装依赖并构建项目。

这些步骤应该能解决大部分路径相关的问题。如果还是有问题，可能需要进一步检查 Capacitor 的配置文件，看看是否有特殊设置影响了静态资源的加载。

2026-03-24 10:04

シ梓熙 Lv1

这是典型的路径问题。Web 端跑在 http://localhost 下，/assets/logo.png 能正常解析，但打包成 App 后走的是 file:// 协议，绝对路径直接废了。

改两个地方就行。

先改 Vite 配置，把 base 设为相对路径：

// vite.config.js

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'



export default defineConfig({

  plugins: [vue()],

  base: './',  // 关键就这一行

})

如果你用的是 Vue CLI，改 vue.config.js：

// vue.config.js

module.exports = {

  publicPath: './'

}

然后图片引用方式改成这样：

或者更稳一点，用 require 或 import 的方式让打包工具自动处理路径：

改完重新 build 一遍再同步到 Android：

npm run build

npx cap sync android

原理就是让打包后的资源路径变成 ./assets/xxx 而不是 /assets/xxx，在 file:// 协议下才能正确找到文件。

2026-03-01 08:33