HIPS-UNI-UI

# Image 图片

# 使用指南

import Image from '@hips/uni-ui/lib/image';

export default {
  components: {
    'hips-image': Image,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-image :src="local" /> <hips-image :src="cloud" />
1
import Local from './assets/hips-image-demo.jpg';

export default {
  data() {
    return {
      local: Local,
      cloud:
        'cloud://env-dev-pq0nf.656e-env-dev-pq0nf-1301553005/app-images/hips-image-demo.jpg',
    };
  },
};
1
2
3
4
5
6
7
8
9
10
11

# 设置大小

<hips-image :src="local" :width="200" :height="200" />
1

# 缩放模式

<hips-image :width="200" :height="200" :src="local" fit="center" />
<hips-image :width="200" :height="200" :src="local" fit="fill" />
<hips-image :width="200" :height="200" :src="local" fit="cover" />
<hips-image :width="200" :height="200" :src="local" fit="contain" />
<hips-image :width="200" :height="200" :src="local" fit="widthFix" />
<hips-image :width="200" :height="200" :src="local" fit="heightFix" />
1
2
3
4
5
6

# 圆形图片

<hips-image :width="200" :height="200" :src="local" fit="center" round />
<hips-image :width="200" :height="200" :src="local" fit="fill" round />
<hips-image :width="200" :height="200" :src="local" fit="cover" round />
<hips-image :width="200" :height="200" :src="local" fit="contain" round />
<hips-image :width="200" :height="200" :src="local" fit="widthFix" round />
<hips-image :width="200" :height="200" :src="local" fit="heightFix" round />
1
2
3
4
5
6

# 设定边界弧度

<hips-image :src="local" :width="200" :height="160" :radius="40" />
1

# 加载中状态

<hips-image show-loading :width="200" :height="200" />

<hips-image show-loading :width="200" :height="200">
  <hips-spin slot="loading" />
</hips-image>
1
2
3
4
5

# 加载失败状态

<hips-image src="xxxx" show-error :width="200" :height="200" />
<hips-image src="xxxx" show-error :width="200" :height="200">
  <text slot="error">
    加载错误
  </text>
</hips-image>
1
2
3
4
5
6

# API

参数 说明 类型 可选值 默认值
src 图片 src String - -
fit 裁剪缩放方式 String ['center', 'fill', 'cover', 'contain', 'widthFix', 'heightFix'] fill
lazy-load 是否延迟加载 Boolean - false
show-menu-by-longpress 是否长按展示操作按钮 Boolean - false
round 是否是圆形图片 Boolean - false
width 图片宽度 String | Number - null
height 图片高度 String | Number - null
radius 圆角弧度 String | Number - null
show-error 是否展示加载错误状态 Boolean - false
show-loading 是否展示加载中状态 Boolean - false

# fit 参数

值 说明
center 裁剪 - 不缩放图片，只显示图片的中间区域
fill 缩放 - 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
cover 缩放 -保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
contain 缩放 - 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
widthFix 缩放 - 宽度不变，高度自动变化，保持原图宽高比不变
heightFix 缩放 - 高度不变，宽度自动变化，保持原图宽高比不变

注意

height, width, radius 参数传递类型为 Number 时，会在后面拼接 rpx 单位，为字符串时不拼接

# Slots

名称 说明
loading 自定义加载中插槽
error 自定义加载错误插槽

# Events

名称 说明 参数
load 加载成功 {height:'图片高度 px', width:'图片宽度 px'}
error 加载失败 {errMsg: 'something wrong'}
click 图片点击事件 -

# 样式变量

变量名 说明 默认值
image-loading-bg-color 加载中状态遮罩背景颜色 #fafafa
image-error-bg-color 加载失败状态遮罩背景颜色 #fafafa

注意

Cell 单元格