ui-image 增强型图片组

版本：v2.3.11

增强型图片组件用于显示图片，支持懒加载、加载失败处理、缩放模式等功能

基本使用

<template>
  <div class="image-demo">
    <ui-image src="https://example.com/image.jpg" alt="示例图片" />
  </div>
</template>

<style scoped>
.image-demo {
  padding: 20px;
  display: flex;
  justify-content: center;
}
</style>

Props

参数	类型	默认值	说明
src	String	-	图片地址
alt	String	-	图片替代文本
fit	String	'fill'	图片填充模式，可选值：fill、contain、cover、none、scale-down
lazy	Boolean	false	是否启用懒加
round	Boolean	false	是否显示为圆形图
width	Number/String	-	图片宽度
height	Number/String	-	图片高度
radius	Number/String	-	图片圆角，单位：px
loading	String	-	加载中显示的内容
error	String	-	加载失败显示的内

Events

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

Slots

名称	说明
loading	自定义加载中内容
error	自定义加载失败内

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/image/image