---
title: Image 图片
description: 用于展示图片素材。
isComponent: true
usage: { title: "", description: "" }
spline: data,
author: 肖恒
---

## 基本用法

主要用于展示图片素材，提供图片的加载以及错误信息等等，可通过`style`来设置图片的样式，通过`gallery`可设置图片的图集样式。

```javascript
:style="{ width: '120px', height: '120px' }"
```

{{ base }}

## 不同填充类型

通过`fit`属性来定义图片的填充类型，可选：`contain`， `cover`, `fill`, `none`， `scale-down`。

{{ fit }}

## 定义着重区域

当图片尺寸大于图片设置的尺寸范围的时候，如果只是简单的设置`fit`属性，并不能根据我们的意愿来进行展示，可以通
过`position`属性来改变图片着重展示的位置。

> 提示：等同于原生的 [`object-position`](https://www.runoob.com/cssref/pr-object-position.html) 属性，可选值为
> `top right` `bottom left` 或 `string`，可以自定义任何单位，`px` 或者 `百分比`

{{ position }}

## 形状

通常指的是图片的圆角效果，通过`shape`来设置，可选：`circle`，`round`，`square`。

{{ shape }}

## 占位元素

通过`placeholder`可设置图片尚未加载完成时候的占位，展示层级低于 `loading` `error` 和图片本身，值类型为字符串时表示占位图
片地址。

> 注意：一定要开启懒加载`lazy`功能。

{{ placeholder }}

## 悬浮层

通过`overlayContent`可设置图片悬浮层内容，通过`overlayTrigger`可设置悬浮层出现的触发条件，可选：`always`，`hover`。

{{ content }}

## 加载错误

通过`error`可设置图片加载失败的错误提示

{{ error }}
