title: cover-image 图片视图 header: develop nav: component sidebar: view_cover-image

webUrl: https://qft12m.smartapps.cn/component/cover-image/cover-image

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

属性说明

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

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/cover-image/cover-image - 图1 请使用百度APP扫码

代码示例 ：图片视图

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <map
  4.         class="map"
  5.         longitude="{{longitude}}"
  6.         latitude="{{latitude}}">
  7.             <cover-image class="cover-image"
  8.             src="https://b.bdstatic.com/miniapp/image/cover-image.png">
  9.             </cover-image>
  10.         </map>
  11.     </view>
  12. </view>
  1. Page({
  2.     data: {
  3.         latitude: '40.042500',
  4.         longitude: '116.274040'
  5.     }
  6. });
  1. .map { 
  2.     width: 100%;
  3.     height: 2.67rem;
  4. }
  6. .cover-image {
  7.     width: 1.93rem;
  8.     height: .89rem;
  9.     margin: 25% 25%;
  10. }

:::

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的渲染顺序与页面中的标签使用顺序一致。