---
name: "image"
mode: "kit"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
---

## image

> [VERSION] Base Library >= 2.10.0

### Description

Image component supporting multiple cropping and scaling modes.

### Parameters

None


### Examples

#### Basic usage and scaling modes

*index.tyml*

```xml
// index.tyml
<view class="wrap">
  <text class="title">scaleToFill (default)</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({});
```

#### Lazy loading and event handling

*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: 'Loaded successfully: ' + e.detail.width + 'x' + e.detail.height,
    });
  },
  onError(e) {
    this.setData({ info: 'Load failed: ' + e.detail.errMsg });
  },
});
```