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图片