Image 图片

增强的 img 标签，提供懒加载、自定义占位、图片预览等功能。

基础用法

可通过 fit 属性决定图片在容器内的填充方式。

<template>
  <div style="display: flex; gap: 16px;">
    <ZcImage src="https://example.com/photo.jpg" fit="cover" width="200px" height="120px" />
    <ZcImage src="https://example.com/photo.jpg" fit="contain" width="200px" height="120px" />
    <ZcImage src="https://example.com/photo.jpg" fit="fill" width="200px" height="120px" />
  </div>
</template>

图片预览

设置 preview 属性可开启点击图片预览大图功能。

<template>
  <ZcImage src="https://example.com/photo.jpg" fit="cover" width="200px" height="120px" preview />
</template>

圆角与懒加载

通过 round 设置圆角，lazy 开启懒加载。

<template>
  <ZcImage
    src="https://example.com/photo.jpg"
    fit="cover"
    width="100px"
    height="100px"
    round
    lazy
  />
</template>

Image API

Props

参数	说明	类型	默认值
src	图片地址	string	''
alt	原生 alt 属性	string	''
fit	填充模式	'fill' | 'contain' | 'cover' | 'none' | 'scale-down'	'fill'
width	图片宽度	string | number	''
height	图片高度	string | number	''
lazy	是否开启懒加载	boolean	false
placeholder	加载时占位图	string	''
error	加载失败时显示的图片	string	''
preview	是否开启预览	boolean	false
previewSrc	预览图地址	string	''
hideOnClickModal	点击遮罩层是否关闭预览	boolean	true
zIndex	预览遮罩层 z-index	number	2000
round	是否为圆形图片	boolean	false
loading	原生加载策略	'eager' | 'lazy'	'eager'

Events

事件名	说明	回调参数
load	图片加载成功时触发	(event: Event)
error	图片加载失败时触发	(event: Event)

Slots

插槽名	说明
placeholder	自定义加载时的占位内容
error	自定义加载失败时的内容