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 | 根节点外部样式类 |