Cordova打包的Vue应用无法加载本地图片资源怎么办？

司徒瑞琴提问于 2026-03-25 11:52:22 阅读 5

框架

我用 Vue + Cordova 打包了一个 App，开发时图片都能正常显示，但打包成 Android APK 后，所有放在 assets 或 public 目录下的本地图片都加载不出来，控制台报 404。试过把图片放 static、public、src/assets 都不行。

我的写法是这样的：

<template>
  <img src="@/assets/logo.png" alt="logo" />
</template>

<script>
export default {
  name: 'App'
}
</script>

是不是 Cordova 对路径处理有特殊要求？该怎么正确引用本地图片？

我来解答赞 1 收藏

反馈

1 条解答

UP主～子源 Lv1

这个情况听起来挺常见的，Cordova 对资源路径的处理确实有点不一样。在 Vue 项目里，图片路径在开发服务器上通常是没问题的，但打包成 Cordova 应用后，路径解析方式就会变。

首先，确保你的图片文件已经正确地被 Cordova 打包进去了。通常情况下，public 文件夹里的内容会被直接复制到 Cordova 的 www 目录下，而 src/assets 则会经过 Webpack 处理。

解决这个问题，你可以试试以下几种方法：

1. 使用相对路径或者根路径来引用图片。比如，如果图片在 public 目录下，你可以这样引用：
src="/assets/logo.png"

2. 如果你是用 Webpack 处理过的图片（即从 src/assets 引入的），确保这些图片被打包到了正确的目录。有时候，Webpack 可能会改变文件路径，你需要检查一下最终打包后的文件结构。

3. 如果以上都不行，可以考虑用 Cordova 的 file:// 协议来引用图片。这种方式更底层一些，但也更可靠。你可能需要在 Cordova 的配置文件中做一些调整，或者用 JavaScript 动态设置图片的 src 属性，比如：

document.getElementById('yourImageId').src = cordova.file.applicationDirectory + 'www/assets/logo.png';

记得给图片标签一个 id 或者其他选择器，方便通过 JavaScript 获取到它。

4. 如果你在 Vue 组件里使用图片，可以尝试用计算属性来生成正确的路径：

computed: {

  logoPath() {

    return cordova.file.applicationDirectory + 'www/assets/logo.png';

  }

}

然后在模板里使用：

有时候 Cordova 和 Webpack 的结合使用会有点坑，调试起来有点费劲，但希望这些建议能帮到你。

2026-03-25 12:07