uni-app map的markers加载不了图片

uni-app map的markers加载不了图片

操作步骤：

  • map组件添加markers

预期结果：

  • 在电脑浏览器上面可以正常看到图标

实际结果：

  • 在电脑浏览器上面看不到图标

bug描述：

map组件，使用markers的时候，加载本地图片。 图片使用的是相对路径。 在电脑谷歌浏览器上面，加载图片不出来。 但是打包app后，又可以看到这些markers图标的。


| 开发环境          | 版本号 | 项目创建方式 |
|-------------------|--------|--------------|
| Windows           | 10     | HBuilderX    |
| HBuilderX         | 4.24   |              |
| Chrome            | 138    |              |
| uniapp/H5         |        |              |

更多关于uni-app map的markers加载不了图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

hx升级到最新版本试试还有没有这个问题

更多关于uni-app map的markers加载不了图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，用了最新版本尝试，还是不行。在电脑端，还是没有显示出来

要怎么解决呢，大佬

回复 m***@163.com: 发个可复现demo

在H5环境下，map组件的markers使用本地图片路径确实存在兼容性问题。这是因为H5平台的安全策略限制，浏览器无法直接访问本地文件系统。

解决方案：

  1. 使用网络图片URL（推荐） 将图片上传到服务器或云存储，使用完整的http/https URL：
markers: [{
  id: 1,
  latitude: 39.909,
  longitude: 116.39742,
  iconPath: 'https://example.com/icon.png'
}]
  1. 使用base64编码 将本地图片转换为base64格式：
iconPath: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'
  1. 使用static目录的绝对路径 在HBuilderX中，static目录下的文件会被拷贝到dist目录：
iconPath: '/static/icon.png'
  1. 条件编译处理平台差异
// #ifdef H5
iconPath: 'https://cdn.example.com/icon.png'
// #endif
// #ifdef APP-PLUS
iconPath: '/static/icon.png'
// #endif
回到顶部