• cover-image 图片视图
  • 属性说明
  • 示例
    • 代码示例：图片视图
  • Bug & Tip

cover-image 图片视图

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

船营网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

属性说明

src

String

是

图标路径，支持临时路径、网络地址。支持 JPG、PNG、BMP 格式

bindload

EventHandle

否

图片加载成功时触发

binderror

EventHandle

否

图片加载失败时触发

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例：图片视图

• SWAN
• JS
• CSS

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 class="canvas"
  
  
  
 canvas-id="mycanvas">
  
  
  
 
  
  
  
 class="cover-image"
  
  
  
 src="https://b.bdstatic.com/miniapp/image/cover-image.png"
  
  
  
 bindload="imageLoad"
  
  
  
 binderror="imageError">
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
 

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