uni-app vue3项目HX4.29之后真机运行本地图片资源显示不出来

uni-app vue3项目HX4.29之后真机运行本地图片资源显示不出来

产品分类

uniapp/App

示例代码：

<u-image src="@/static/img/weather/0@1x.png" width="60rpx" height="60rpx"></u-image>  
<image src="@/static/img/weather/0@1x.png" style="width: 60rpx;height: 60rpx;"></image>  
<image src="@/static/pay-ali.png" style="width: 60rpx;height: 60rpx;"></image>  
<image :src="imageUrl" style="width: 60rpx;height: 60rpx;"></image>

操作步骤：

<u-image src="@/static/img/weather/0@1x.png" width="60rpx" height="60rpx"></u-image>  
<image src="@/static/img/weather/0@1x.png" style="width: 60rpx;height: 60rpx;"></image>  
<image src="@/static/pay-ali.png" style="width: 60rpx;height: 60rpx;"></image>  
<image :src="imageUrl" style="width: 60rpx;height: 60rpx;"></image>

更多关于uni-app vue3项目HX4.29之后真机运行本地图片资源显示不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好，你把这些图片，放到一个新的项目，连同您的写法，提供一下一个能够复现的项目

更多关于uni-app vue3项目HX4.29之后真机运行本地图片资源显示不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是HBuilderX 4.29版本后引入的本地资源路径解析问题。解决方案如下：

  1. 对于u-image组件，建议使用绝对路径：
<u-image src="/static/img/weather/0@1x.png" width="60rpx" height="60rpx"></u-image>
  1. 对于image标签，同样使用绝对路径：
<image src="/static/img/weather/0@1x.png" style="width: 60rpx;height: 60rpx;"></image>
  1. 动态绑定的图片路径确保是绝对路径：
data() {
  return {
    imageUrl: '/static/pay-ali.png'
  }
}
回到顶部