# Img 图片

增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载中提示、加载失败提示。

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 示例

# 基础用法

设置图片的 width 宽和 height 高和 src 路径便可正常显示。

加载失败则显示占位内容。

<pi-img
  width="220"
  height="120"
  :custom-style="{ background: '#cccccc' }"
  src="http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg"
/>
<pi-img
  width="220"
  height="120"
  :custom-style="{ background: '#cccccc' }"
  src="http://img.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg"
/>
<pi-img
  width="220"
  height="120"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc + 1"
>
  <view slot="error">
    自定义占位内容
  </view>
</pi-img>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 懒加载

lazyLoad 属性可开启图片懒加载,需要注意的是,要配合 width 宽和 height 高使用。

<pi-img
  width="220"
  height="200"
  mode="widthFix"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
 />
<pi-img
  width="220"
  height="200"
  mode="widthFix"
  loading-type="round"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

提示

可以使用slot对该组件进行二次封装,自定义loading图标和error内容。

# 裁剪/缩放

<pi-img
  width="220"
  mode="widthFix"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="320"
  mode="scaleToFill"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="220"
  mode="aspectFit"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/
<pi-img
  width="220"
  height="220"
  mode="aspectFill"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

更多的缩放/裁剪模式详情请见uni-app的 Image (opens new window) 组件。

# 图片形状

通过shape 设置图片的形状,使其使用于更多场景。

<pi-img
  width="220"
  height="220"
  mode="widthFix"
  shape="square"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
<pi-img
  width="220"
  height="220"
  mode="scaleToFill"
  loading-type="round"
  shape="round"
  :custom-style="{ background: '#cccccc' }"
  :src="imgsrc"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# API

# Image Props

名称 描述 类型 必选 默认值
customStyle 自定义样式 Object false -
customClass 自定义样式类 String false -
src 图片地址 String false ''
mode 裁剪模式 String false 'widthFix'
width 宽度 String | Number false '100%'
height 高度 String | Number false 'auto'
dot 是否显示图标右上角小红点 Boolean false false
dotRadius 小红点的半径 String | Number false 16
badge 图标右上角徽标的内容 String | Number false ''
shape 图片形状 'round'-圆形 'square'-方形 false 'square'
borderRadius shape为square的时候设置 String | Number false 0
lazyLoad 是否懒加载 Boolean false true
showMenuByLongpress 开启长按图片显示识别微信小程序码菜单 Boolean false true
showLoading 是否显示加载中的图标或者自定义的slot Boolean false true
loadingColor 加载中颜色 String false '#c1c1c1'
loadingType loading类型 'spinner'-菊花 'round'-圆环 false 'spinner'
loadingSize 尺寸 String | Number false 32
showError 是否显示加载中的图标或者自定义的slot Boolean false true
webp 默认不解析 webP 格式,只支持网络资源 Boolean false false

# Image Events

事件名 描述 参数
click - -
load 图片加载完成 -

# Image Slots

名称 描述 插槽内容
loading 加载中样式 -
error 加载失败样式 -
Last updated: 2021/7/22 下午6:39:12
10:44