Image 图片

介绍

为原生图片封装了一些有用的属性，如加载状态、失败状态、圆角等功能。

导入

import Image from '@/components/basic/Image.vue'

用法

基础用法

基础用法与原生 Image 标签一致，增加了 width、height 宽高属性。

<template>
  <Image 
    src="https://imengyu.top/assets/images/test/1.jpg"
    width="200rpx" 
    height="200rpx" 
  />
</template>

圆形图片

通过 round 属性可以设置图片变圆，radius 可以指定圆角大小。

<template>
  <view style="display: flex; gap: 10px;">
    <Image 
      src="https://imengyu.top/assets/images/test/2.jpg"
      width="200rpx" 
      height="200rpx" 
      round
    />
    <Image 
      src="https://imengyu.top/assets/images/test/3.jpg"
      width="200rpx" 
      height="200rpx"
      round
      radius="20rpx"
    />
  </view>
</template>

加载中

通过 showLoading 属性来显示加载中提示，默认是 true。

<template>
  <Image 
    src="https://imengyu.top/assets/images/test/3.jpg"
    width="200rpx" 
    height="200rpx"
    round 
    showLoading
    radius="10"
  />
</template>

加载失败

通过 showFailed 属性来显示加载失败提示，默认是 true。

<template>
  <Image
    src="https://imengyu.top/assets/images/test2/2.jpg"
    width="200rpx" 
    height="200rpx"
    round 
    radius="10"
  />
</template>

点击预览

通过 clickPreview 属性可以点击预览图片。

<template>
  <Image
    src="https://imengyu.top/assets/images/test/1.jpg"
    width="200rpx" 
    height="200rpx"
    clickPreview
  />
</template>

自定义加载状态样式

可以自定义加载中圆圈的颜色和大小。

<template>
  <Image
    src="https://imengyu.top/assets/images/test/1.jpg"
    width="200rpx" 
    height="200rpx"
    showLoading
    loadingColor="primary"
    loadingSize="30"
  />
</template>

API 参考

Image

图片组件。

Props

名称	说明	类型	必填	默认值
src	图片地址	string	-	''
failedImage	加载失败图片地址	string	-	''
defaultImage	为空时图片地址	string	-	''
showLoading	是否显示加载中提示，默认是	boolean	-	true
showFailed	是否显示加载失败提示，默认是	boolean	-	true
showGrey	是否显示灰色占位，默认是	boolean	-	false
width	图片宽度	string | number	-	-
height	图片高度	string | number	-	-
clickPreview	是否可以点击预览图片	boolean	-	false
loading	初始加载中状态	boolean	-	false
loadingColor	加载中圆圈颜色	string	-	border.default
loadingSize	加载中圆圈大小	string | number	-	50
touchable	指定图片是否可以点击，默认否	boolean	-	false
round	图片是否有圆角	boolean	-	false
radius	当round为true的圆角大小，默认是50%	string | number	-	50%
innerStyle	内部样式	object	-	-
mode	图片裁剪、缩放的模式，同原生image组件	string	-	-
lazyLoad	是否懒加载	boolean	-	-
fadeShow	图片显示动画效果	boolean	-	-
webp	是否支持webp格式	boolean	-	-
showMenuByLongpress	是否开启长按图片显示菜单	boolean	-	-
draggable	是否可拖拽	boolean	-	-

Events

名称	说明	参数
click	点击事件	$event

主题变量

名称	类型	默认值	说明
ImageShowGrey	boolean	false	是否显示灰色占位
ImageLoadingColor	string	border.default	加载中圆圈颜色
ImageLoadingSize	number	50	加载中圆圈大小
ImageRound	boolean	false	图片是否有圆角
ImageRadius	string	50%	当round为true的圆角大小