uni-app 开发H5时 内置map组件自定义marker callout使用 cover-image不生效 图片不渲染

uni-app 开发H5时 内置map组件自定义marker callout使用 cover-image不生效 图片不渲染

操作步骤：

<cover-view slot="callout">  
    <block v-for="(item, index) in mapData.markers" :key="index">  
        <cover-view :marker-id="item.id" v-if="item.callout">  
            <cover-image class="icon" src="../../static/h5/nav-red.png"></cover-image>  
            <cover-view class="content">  
                {{item.callout.content}}  
            </cover-view>  
        </cover-view>  
    </block>  
</cover-view>

预期结果：

正确渲染图片+文字

实际结果：

只渲染了文字，图片没渲染出来

bug描述：

uni-app 开发H5，使用内置map 自定义marker callout 使用 cover-image不生效，图片不渲染


更多关于uni-app 开发H5时 内置map组件自定义marker callout使用 cover-image不生效 图片不渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

为啥我的文字啥的都不显示呢

更多关于uni-app 开发H5时 内置map组件自定义marker callout使用 cover-image不生效 图片不渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni-app 开发H5，使用内置map 自定义的气泡框根本就不显示，但是callout 可以

在uni-app的H5平台，map组件的callout自定义标注确实存在cover-image渲染问题。这是由于H5端map组件基于原生<map>标签实现，对cover-view/cover-image的支持有限。

解决方案：

  1. 使用base64图片：将图片转换为base64格式直接嵌入
<cover-image class="icon" src="data:image/png;base64,iVBORw0KGgo..."></cover-image>
  1. 使用网络图片：确保使用完整的HTTPS URL
<cover-image class="icon" src="https://your-domain.com/static/h5/nav-red.png"></cover-image>
  1. 检查路径问题：H5端相对路径解析可能不同，建议使用绝对路径或require引入
<cover-image class="icon" :src="require('../../static/h5/nav-red.png')"></cover-image>
回到顶部