Image 图标

使用指南

组件介绍

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

引入方式

import { Image } from 'feart';

components: {
  'fe-image': Image,
},

代码演示

默认 Image

基础用法与原生 img 标签一致，可以设置 src、width、height、alt 等原生属性

<fe-image width="100" height="100" src="https://nuofe.nntest.cn/feart/images/demoimgs/cat.jpg" />

填充模式

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

<fe-image
  width="10rem"
  height="10rem"
  fit="contain"
  src="https://nuofe.nntest.cn/feart/images/demoimgs/cat.jpg"
/>

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

<fe-image
  round
  width="10rem"
  height="10rem"
  src="https://nuofe.nntest.cn/feart/images/demoimgs/cat.jpg"
/>

加载中提示

Image 组件提供了默认的加载中提示，支持通过 loading 插槽自定义内容

<fe-image src="https://nuofe.nntest.cn/feart/images/demoimgs/cat.jpg">
  <div slot:loading>
    <fe-loading size="20px" />
  </div>
</fe-image>

加载失败提示

Image 组件提供了默认的加载失败提示，支持通过 error 插槽自定义内容

<fe-image src="https://nuofe.nntest.cn/feart/images/demoimgs/cat.jpg">
  <div slot:error>加载失败</div>
</fe-image>

API

图片填充模式

Events

Slots