Image 图片

预览图片

基本使用

使用 src 属性设置图片的路径，width 设置图片的宽度，height 可以设置图片的高度

开启

使用本地图片

如需要使用本地图片，需要使用 new URL(url, import.meta.url) 手动导入图片资源使用：

开启

适应容器方式

fit 属性可以配置不同的适应容器的方式，详见原生 object-fit 属性

fill

contain

cover

none

scale-down

开启

圆角图片

round 属性可以配置圆角图片，你需要传入一个具体的数值单位

开启

懒加载

lazy 属性可以设置图片懒加载，详情可参考 DevTools 的 Network

开启

加载失败

Fighting Design 对于图片加载失败做了很多的处理，下面分别介绍一下

err-src 可以在 src 加载失败的时候，备用进行加载

alt 属性可以在图片加载失败的时候，展示信息

你也可以使用 error 插槽自定义你的错误信息展示

开启

Attributes

参数	说明	类型	可选值	默认值
`src`	图片路径	string	——	——
`err-src`	src 加载失败时加载的地址	string	——	——
`alt`	原生 alt 属性	string	——	——
`draggable`	是否可以拖动	boolean	——	true
`lazy`	是否懒加载图片	boolean	——	false
`root-margin`	触发懒加载的距离	string / number	——	100px
`width`	图片的宽度	string / number	——	——
`height`	图片的高度	string / number	——	——
`block`	是否为块级元素	boolean	——	false
`fit`	如何适应容器，原生 object-fit 属性	FightingFit	`fill` `contain` `cover` `none` `scale-down`	——
`select`	是否禁止选择	boolean	——	false
`referrer-policy`	原生 referrerPolicy 属性	string	——	——
`round`	配置圆角，传入一个数值	string / number	——	——
`title`	img 的 title	string	——	——
`on-load`	图片加载成功触发的回调	HandleEvent	——	——
`on-error`	图片加载失败触发的回调	HandleEvent	——	——

Slots

插槽名称	说明说明
`error`	自定义加载失败提示

Interface

组件导出以下类型定义：

import type { ImageInstance, ImageProps, ImageFit } from 'fighting-design'

Image 图片 ​

基本使用 ​

使用本地图片 ​

适应容器方式 ​

圆角图片 ​

懒加载 ​

加载失败 ​

Attributes ​

Slots ​

Interface ​

Contributors ​