uni-app vue3编译app插件内图片相对路径识别问题

uni-app vue3编译app插件内图片相对路径识别问题

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 20H2
HBuilderX类型 正式
HBuilderX版本 3.2.9
手机系统 Android
手机版本号 Android 9.0
手机厂商 华为
手机机型 MHA-AL00
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

<view class="content-top">  
    <text class="content-top-text">{{title}}</text>  
    <image class="content-top" style="top: 0;" width="100%" height="100%" src="../static/bg_top.png"></image>  
</view>

预期结果：

显示 src="../static/bg_top.png" 图片

实际结果：

升级页面没有显示图片

bug描述：

HBuilder X更新到3.2.9.20210927：【重要】新增 uni-app Vue3 版本 支持运行和发行到 App 后，vue3运行的app识别不了插件 uni-upgrade-center - App 代码内图片的相对路径，只能用绝对路径才识别，普通的项目和uni-starter 测试都存在这个问题。


更多关于uni-app vue3编译app插件内图片相对路径识别问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

调试的时候也有吗？还是说只有发行打包后有这个问题？
使用 3.2.9 测试没有发现此问题

更多关于uni-app vue3编译app插件内图片相对路径识别问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我就是测试的时候发现这个问题的，打包后我已经改成绝对路径了，也不知道打包后是否还要这个问题。但是看您说的“使用 3.2.9 测试没有发现此问题”，我就是测试了三个项目，都存在这个问题，我这边是用的是真机调试，HBuilder版本也确定是3.2.9，要不然我也不可能app运行vue3呀

回复 橘子侠: 怎么在打包后把图片路径改为绝对路径？

回复 n***@126.com: 我是直接改代码的

同款问题，调试的时候和打包后一直无法显示图片 HX 3.3.13

我遇到一个类似的 解决方法 <view style="background: url(../images/update-5.png);background-size: cover!important;width: 0rpx;height: 0rpx;"></view> 把容器设置成宽高为0，这个图片先渲染出来 然后再动态渲染这个路径，这个图片才会出来，不然也是一样无法读取这个图片，HX3.6.4

这是一个已知的uni-app Vue3版本在App平台编译插件时出现的路径解析问题。当使用uni-upgrade-center等插件时，插件内的相对路径图片在Vue3环境下无法正常加载。

问题原因： Vue3编译模式下，插件内的相对路径资源在打包时路径解析机制与Vue2不同，导致最终生成的资源路径不正确。

临时解决方案：

  1. 使用绝对路径：将图片路径改为以/static/开头的绝对路径
<image src="/static/bg_top.png"></image>
回到顶部