cover-image 图片视图

解释：覆盖在原生组件之上的图片视图（与 cover-view 相比，仅支持图片）,支持嵌套在 cover-view 里。

属性说明

属性名类型默认值必填说明
srcString否图标路径，支持临时路径、网络地址。暂不支持 base64 格式。
bindloadEventHandle否图片加载成功时触发
binderrorEventHandle否图片加载失败时触发

示例

在开发者工具中预览效果

扫码体验

cover-image 图片视图 - 图1请使用百度APP扫码

代码示例 ：图片视图

  1. <map id="myMap" style="width: 100%" longitude="{{longitude}}" atitude="{{latitude}}">
  2.     <cover-image class="cover-image"
  3.         src="https://b.bdstatic.com/miniapp/image/cover-image.png">
  4.     </cover-image>
  5. </map>
  1. Page({
  2.     data: {
  3.         latitude: '40.042500',
  4.         longitude: '116.274040'
  5.     }
  6. });

Bug & Tip

  • Tip：支持 css transition 动画，transition-property 只支持 transform (translateX, translateY) 与 opacity。
  • Tip：文本建议都套上 cover-view 标签，避免排版错误。
  • Tip：只支持基本的定位、布局、文本样式。不支持设置单边的 border、background-image、shadow、overflow: visible 等。
  • Tip：建议子节点不要溢出父节点。
  • Tip：默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block。
  • Tip：建议不要频繁改变 s-if 表达式的值控制显隐，否则会导致 cover-view 显示异常。
  • Bug：IOS端暂不支持一个页面有多个video时嵌套cover-view。
  • Tip：cover-view 和 cover-image 从基础库版本1.12.0开始支持事件捕获、冒泡。
  • Tip：cover-image和cover-view的渲染顺序与页面中的标签使用顺序一致。