---
name: "image"
mode: "kit"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
---

## image

> [VERSION] 基础库 >= 2.10.0

### 描述

图片组件，支持多种裁剪和缩放模式。

### 参数

无


### 示例代码

#### 基础用法与缩放模式

*index.tyml*

```xml
<view class="wrap">
  <text class="title">scaleToFill（默认）</text>
  <image src="https://example.com/pic.jpg" mode="scaleToFill" class="img" />

  <text class="title">aspectFit</text>
  <image src="https://example.com/pic.jpg" mode="aspectFit" class="img" />

  <text class="title">aspectFill</text>
  <image src="https://example.com/pic.jpg" mode="aspectFill" class="img" />

  <text class="title">widthFix</text>
  <image src="https://example.com/pic.jpg" mode="widthFix" class="img-auto" />
</view>
```

*index.tyss*

```css
.wrap { padding: 20rpx; }
.title { font-size: 28rpx; color: #666; margin: 20rpx 0 10rpx; }
.img { width: 300rpx; height: 300rpx; background-color: #f0f0f0; }
.img-auto { width: 300rpx; }
```

*index.js*

```javascript
Page({});
```

#### 懒加载与事件处理

*index.tyml*

```xml
<view class="wrap">
  <image
    src="{{imgSrc}}"
    mode="widthFix"
    lazy-load="{{true}}"
    fade-duration="{{300}}"
    class="img"
    bindload="onLoad"
    binderror="onError"
  />
  <text ty:if="{{info}}">{{info}}</text>
</view>
```

*index.tyss*

```css
.wrap { padding: 20rpx; }
.img { width: 100%; }
```

*index.js*

```javascript
Page({
  data: {
    imgSrc: 'https://example.com/pic.jpg',
    info: '',
  },
  onLoad(e) {
    this.setData({
      info: '加载成功: ' + e.detail.width + 'x' + e.detail.height,
    });
  },
  onError(e) {
    this.setData({ info: '加载失败: ' + e.detail.errMsg });
  },
});
```