Skip to content
On this page

Img 图片

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

基本用法

基础用法与原生 image 标签一致,可以设置 srcwidthheight 等原生属性。

原生属性,参考uni-app image官方文档

此处需要注意的是src属性:

使用 相对路径,需要注意 src 需要以组件存放位置相对图片位置为相对路径。

使用 文件导入 ,需要注意的是微信小程序image标签路径接受二进制数据以及base64编码。单独使用import图片路径无法访问。

html
<wd-img
 :width="100"
 :height="100"
  :src="joy"
/>
typescript
// import { joy } from '../images/joy'
const joy = 'data:image/jpeg;base64,...'  // 图片文件base64

填充模式

通过 mode 属性可以设置图片填充模式,可选值见下方表格。

mode为小程序原生属性,参考微信小程序image官方文档

html
<wd-img
 :width="100"
 :height="100"
  mode="center"
  :src="joy"
/>

圆形设置

通过 round 属性可以设置以圆形展示。

html
<wd-img
 :width="100"
 :height="100"
  round
  :src="joy"
/>

Attributes

参数说明类型可选值默认值最低版本
src图片链接string---
width宽度,默认单位为pxnumber / string---
height高度,默认单位为pxnumber / string---
mode填充模式string'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill''scaleToFill'-
round是否显示为圆形boolean-false-
radius圆角大小,默认单位为pxnumber / string---

Events

事件名称说明参数最低版本
click点击事件--
load当图片载入完毕时触发 {height, width}-
error当错误发生时触发{errMsg}-

外部样式类

类名说明最低版本
custom-class根节点样式-
custom-imageimage 外部自定义样式-

Released under the MIT License.

Released under the MIT License.