cover-image

图片视图。cover-image 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里

效果展示

示例代码

WXML

<view class="page">
<video src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">
<cover-image src="https://document.lightyy.com/images/logo.svg" bindload="bindloadImg" binderror="imageError"></cover-image>
</video>

<canvas style="width: 300px; height: 200px;" id="canvas" canvas-id="firstCanvas">
<cover-image src="https://document.lightyy.com/images/logo.svg" bindload="bindloadImg" binderror="imageError"></cover-image>
</canvas>

<canvas style="width: 300px; height: 200px;" id="canvas" canvas-id="firstCanvas">
<cover-image src="https://error.svg" bindload="bindloadImg" binderror="imageError"></cover-image>
</canvas>

<canvas style="width: 300px; height: 200px;" id="canvas" canvas-id="firstCanvas">
<cover-view class="cover-view flex-item">
<cover-image src="https://document.lightyy.com/images/logo.svg" bindload="bindloadImg" binderror="imageError"></cover-image>
</cover-view>
</canvas>
</view>

JS

Page({
data:{
src:"",
},
bindloadImg(){
console.log('enter load image')
},
imageError: function (e) {
console.log('image发生error事件,携带值为', e.detail.errMsg);
},
})

WXSS

.cover-view {
position: absolute;
top: 20px;
left: 20px;
background: rgba(26, 173, 25, 0.7);
}
.cover-img {
position: absolute;
top: 0;
left: 0;
}
.flex-item{
width: 100px;
height: 150px;
font-size: 26px;
}
.demo-text-1 {
overflow-y: scroll;
}

API

属性 类型 默认值 必填 说明
src string 图片资源地址,不支持相对路径的SVG格式
binderror eventhandle 当错误发生时触发,event.detail = {errMsg}
bindload eventhandle 当图片载入完毕时触发,event.detail = {height, width}

多平台支持

属性 平台支持
src 支付宝
mode 支付宝
binderror 支付宝
bindload 支付宝

注释:

支付宝支持远程和本地svg图片