uni-app 真机运行不显示本地图片

uni-app 真机运行不显示本地图片

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
</head>
<body>
<img src="./img/error_02.png" width="300" height="300">
<img src="img/circle.png" width="100%">
</body>
<script type="text/javascript">
var img = document.createElement("img")
img.src="./img/circle.png"
document.body.appendChild(img)  
</script>
</html>

操作步骤：

创建demo 真机运行 图片不显示

预期结果：

希望真机运行显示图片

实际结果：

不加载本地图片

bug描述：

在新建的5+APP项目 默认模板，真机运行时，引入本地图片不显示，引入网络图片显示。（图2显示的图片是https网络图片）。 同版本编辑器、数据线、手机，在我的笔记本真机运行图片可以加载，在同事的笔记本真机运行，不显示本地图片。 在调试中发现： 当我在真机运行过程中，手动在img文件夹加入图片，在index.html引入此图片，可以正常显示。但是此时如果重新真机运行，那刚刚正常加载的图片也不显示了。 在同事的笔记本，使用默认创建的hello mui模板，图片也不显示，包括轮播和图文。

信息类别 信息
产品分类 HTML5+
HBuilderX版本号 3.1.11
手机系统 Android
手机系统版本号 Android 11
手机厂商 小米
手机机型 小米10
打包方式 离线

Image Image


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

1 回复

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


问题出在静态资源路径处理上。在uni-app或5+ App项目中，真机运行时本地图片需要使用绝对路径或/static目录。

解决方案：

  1. 将图片放在static目录下，引用路径改为/static/img/error_02.png
  2. 使用base64编码直接嵌入图片
  3. 通过plus.io.convertLocalFileSystemURL转换本地路径

修改后的代码示例：

<img src="/static/img/error_02.png" width="300" height="300">

对于动态创建的图片：

var img = document.createElement("img")
img.src = "/static/img/circle.png"
document.body.appendChild(img)
回到顶部