uni-app wgt 热更新后 本地图片不显示

uni-app wgt 热更新后 本地图片不显示

开发环境 版本号 项目创建方式
Windows 22631.4890 HBuilderX

测试过的手机：

  • nova 14 pro

操作步骤：

  • 热更新

预期结果：

  • 正常显示图片

实际结果：

  • 显示空白

bug描述：

  • 不是绝对 偶现 只是最近概率比较大
  • 通绝对路径直接使用
    <image src="/static/image/xxxx.png">
  • 通过组件使用
    <Icon imgName="xxx">
props imgName
const imgPath = computed(() => `/static/image/${imgName}.png`)
<image :src="imgPath">

更多关于uni-app wgt 热更新后 本地图片不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

uniapp 中使用图片用哪种方式好呢 uniapp+vue3+ts
方式一：import testPath from ‘@/static/image/idcard-front.png’ <image :src="testPath">
方式二： <image src="/static/image/idcard-front.png">

更多关于uni-app wgt 热更新后 本地图片不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


app  打包wgt  这个wgt 包含的内容是啥  static 文件夹中的内容每次打wgt热更新都会全部包含？

<image :src="require('./img/a.png')" /> 这样最好

热更新后本地图片不显示是常见问题，主要原因是wgt包中的静态资源路径处理异常。以下是排查和解决方案：

  1. 静态资源路径验证 在热更新后检查图片实际路径是否正确。可通过plus.io.convertLocalFileSystemURL()将相对路径转换为绝对路径进行测试。

  2. 资源完整性检查 wgt包可能未完整包含static目录，检查打包配置确保static文件夹被正确包含。同时验证图片文件在wgt包中的实际存储路径。

  3. 缓存清理策略 热更新后尝试强制清理缓存：

    plus.io.resolveLocalFileSystemURL('_www/static', function(entry) {
  entry.removeRecursively();
});

  4. 路径引用方式优化 建议使用~@开头的绝对路径：

    <image src="~@/static/image/xxxx.png">

    或在组件中使用require：

    const imgPath = computed(() => require(`@/static/image/${imgName}.png`))
回到顶部