@retailwe/ui-image

Image 图片

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "wr-image": "@retailwe/ui-image/index"
}

代码演示

基础用法

<wr-image src="{{imgUrl}}"></wr-image>

Page({
  data: {
    imgUrl:
      'http://bl-material-qa-1300977798.cos.ap-guangzhou.myqcloud.com/persist/1/b236c5b77acd4908b5868e828687f531-1.jpg',
  },
});

添加cdn裁剪参数

<wr-image src="{{imgUrl}}" width="150" height="150"></wr-image>

使用加载占位图

<wr-image
  src="https://errurl"
  width="200"
  height="200"
  loading-image="yunshuzhong"
  load-failed-image="tips">
</wr-image>
<wr-image
  src="https://errurl"
  width="200"
  height="200"
  use-loading-slot
  useLoad-failed-slot>
  <view slot="loading" style="color: gray; font-size: 24rpx">正在加载</view>
  <view slot="failed" style="color: gray; font-size: 24rpx">加载失败</view>
</wr-image>

传入自定义样式

<wr-image
  src="https://errurl"
  width="200" height="200"
  loading-image="yunshuzhong"
  load-failed-image="tips"
  img-style="color: white; font-size: 60rpx; background-color: lightblue;">
</wr-image>
<wr-image
  src="{{imgUrl}}"
  width="200"
  height="200"
  img-style="opacity: 0.8; border-radius: 50%; border: 3px solid gold; box-sizing: border-box;">
</wr-image>

API

Image Props

参数	说明	类型	默认值	版本
src	图片地址，透传给原生image	string	-	-
img-style	图片自定义样式	string	-	-
mode	填充样式，透传给原生image，可参考小程序官方文档	string	scaleToFill	-
webp	透传给原生image，可参考小程序官方文档	boolean	true	-
width	图片的宽度，会自动拼接到src，单位rpx	string|number	-	-
height	图片的高度，会自动拼接到src，单位rpx	string|number	-	-
lazy-load	是否启用懒加载，透传给原生image，可参考小程序官方文档	boolean	-	-
loading-image	自定义加载中状态图片/icon, 传入值带/就认为是图片, 否则默认为icon	string	-	-
use-loading-slot	使用loading slot, 这时会忽略 loading-image 的传值	boolean	-	-
load-failed-image	自定义加载中状态图片/icon, 传入值带/就认为是图片, 否则默认为icon	string	jiazaishibai	-
use-load-failed-slot	使用failed slot, 这时会忽略 load-failed-image 的传值	boolean	-	-

Image Event

事件名	说明	参数
load	图片加载完毕后触发	event.detail: {height, width}
error	图片加载失败后触发	event.detail: {errMsg}

Image Slot

名称	说明
loading	图片加载完成前的占位内容
failed	图片加载失败后的占位内容

外部样式类

类名	说明
wr-class	根节点外部样式类