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

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

框架

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

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

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

我来解答赞 7 收藏

反馈

1 条解答

シ梓熙 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