Image

Introduction

The Image component is used to display images in various formats such as JPG, PNG, SVG, WEBP, GIF, etc.

Attribute Description

Attribute	Type	Default Value	Required	Description	Minimum Version
src	String	N/A	Yes	The URL of the image resource
data-src	String	N/A	No	The URL of the image resource for lazy loading
mode	String	scaleToFill	No	The mode for image scaling and cropping
lazyLoad	Boolean	false	No	Whether to enable image lazy loading	> 0.1.0
binderror	EventHandle	N/A	No	The event name published to AppService when an error occurs
bindload	EventHandle	N/A	No	The event name published to AppService when the image is loaded

Valid values for mode

There are 13 modes available, including 4 scaling modes and 9 cropping modes.

Mode	Value	Description	Minimum Version
Scaling	scaleToFill	Scale the image without maintaining the aspect ratio to completely stretch the width and height to fit the image element
Scaling	aspectFit	Scale the image while maintaining the aspect ratio so that the long side of the image is fully displayed
Scaling	aspectFill	Scale the image while maintaining the aspect ratio so that the short side of the image is fully displayed
Scaling	heightFix	Keep the height unchanged and automatically adjust the width to maintain the original aspect ratio
Scaling	widthFix	Keep the width unchanged and automatically adjust the height to maintain the original aspect ratio
Cropping	top	Do not scale the image and only display the top area of the image
Cropping	bottom	Do not scale the image and only display the bottom area of the image
Cropping	center	Do not scale the image and only display the center area of the image
Cropping	left	Do not scale the image and only display the left area of the image
Cropping	right	Do not scale the image and only display the right area of the image
Cropping	top left	Do not scale the image and only display the top left area of the image
Cropping	top right	Do not scale the image and only display the top right area of the image
Cropping	bottom left	Do not scale the image and only display the bottom left area of the image
Cropping	bottom right	Do not scale the image and only display the bottom right area of the image

Examples

Code Example 1: Custom Scaling Modes

<view class="wrap">
  <view class="card-area" s-for="item in scaleArray">
    <image
      :class="['image-area', item.hasBackgroud == 1 ? 'backGround': '']"
      :data-name="item.mode"
      :mode="item.mode"
      :src="src"
      :key="item.mode"
      bind:tap="onTap"
      bind:binderror="imageError"
      bind:bindload="imageLoad"
    />
    <view class="bottom-description">{{ item.text }}</view>
  </view>
</view>

Page({
  data: {
    scaleArray: [
      {
        mode: 'scaleToFill',
        text: 'scaleToFill: Stretch the image to fit the image element without maintaining the aspect ratio',
      },
      {
        mode: 'aspectFit',
        text: 'aspectFit: Scale the image while maintaining the aspect ratio so that the long side is fully displayed',
        hasBackgroud: 1,
      },
      {
        mode: 'aspectFill',
        text: 'aspectFill: Scale the image while maintaining the aspect ratio so that the short side is fully displayed',
      },
      {
        mode: 'widthFix',
        text: 'widthFix: Keep the width unchanged and automatically adjust the height to maintain the aspect ratio',
      },
      {
        mode: 'heightFix',
        text: 'heightFix: Keep the height unchanged and automatically adjust the width to maintain the aspect ratio',
      },
    ],
    src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
  },
  imageError(e) {
    console.log('Image error occurred', e.detail.errMsg);
  },
  onTap(e) {
    console.log('Image tapped', e);
  },
  imageLoad(e) {
    console.log('Image loaded successfully', e.type);
  },
});

Code Example 2: Custom Cropping Modes

<view class="wrap">
  <view class="card-area" s-for="item in cutArray">
    <image
      class="image-area"
      :data-name="item.mode"
      :lazy-load="true"
      :image-menu-prevent="true"
      :mode="item.mode"
      :src="src"
      :key="item.mode"
      bind:tap="onTap"
      bind:binderror="imageError"
      bind:bindload="imageLoad"
    />
    <view class="bottom-description">{{item.text}}</view>
  </view>
</view>

Page({
  data: {
    cutArray: [
      {
        mode: 'top',
        text: 'top: Do not scale the image and only display the top area',
      },
      {
        mode: 'bottom',
        text: 'bottom: Do not scale the image and only display the bottom area',
      },
      {
        mode: 'center',
        text: 'center: Do not scale the image and only display the center area',
      },
      {
        mode: 'left',
        text: 'left: Do not scale the image and only display the left area',
      },
      {
        mode: 'right',
        text: 'right: Do not scale the image and only display the right area',
      },
      {
        mode: 'top left',
        text: 'top left: Do not scale the image and only display the top left area',
      },
      {
        mode: 'top right',
        text: 'top right: Do not scale the image and only display the top right area',
      },
      {
        mode: 'bottom left',
        text: 'bottom left: Do not scale the image and only display the bottom left area',
      },
      {
        mode: 'bottom right',
        text: 'bottom right: Do not scale the image and only display the bottom right area',
      },
    ],
    src: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
  },
  imageError(e) {
    console.log('Image error occurred', e.detail.errMsg);
  },
  onTap(e) {
    console.log('Image tapped', e);
  },
  imageLoad(e) {
    console.log('Image loaded successfully', e.type);
  },
});

Code Example 3: Image Lazy Loading

<view class="img-wrap">
  <!-- When lazy loading is enabled, use data-src for the actual image source and src for the placeholder image -->
  <image
    class="demo-img"
    src="/images/img_5222.png"
    data-src="/images/img_5223.png"
    :lazy-load="true"
  />
</view>