Image

Image. This component supports JPG, PNG, and SVG images. Cloud file IDs are supported from 2.3.0 and later.

Note: To implement the mode feature of the mini program, a div container is used in the H5 component to corp the display area of the internal img, so please do not use the element selector to reset the style of the img!

Reference

Type

ComponentType<ImageProps>

Examples

React

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Image
          style='width: 300px;height: 100px;background: #fff;'
          src='nerv_logo.png'
        />
        <Image
          style='width: 300px;height: 100px;background: #fff;'
          src='https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67'
        />
      </View>
    )
  }
}

Vue

<template>
  <view class="components-page">
    <image
      style="width: 300px;height: 100px;background: #fff;"
      src="nerv_logo.png"
    />
    <image
      style="width: 300px;height: 100px;background: #fff;"
      src="https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67"
    />
  </view>
</template>

ImageProps

Property	Type	Default	Required	Description
src	string		Yes	The image resource address
mode	"scaleToFill" | "aspectFit" | "aspectFill" | "widthFix" | "heightFix" | "top" | "bottom" | "center" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right"	"scaleToFill"	No	Specifies the clipping mode or the scale mode of an image
webp	boolean	false	No	WebP format is not parsed by default, only web resources are supported.
lazyLoad	boolean	false	No	Enables lazy loading of images. An image is not loaded until it enters a specific range (within three consecutive screens).
showMenuByLongpress	boolean	false	No	Enables the feature of displaying the Mini Program code menu when an image is tapped and held.
onError	BaseEventOrigFunction<onErrorEventDetail>		No	Triggered when an error occurs. event.detail = {errMsg}
onLoad	BaseEventOrigFunction<onLoadEventDetail>		No	Triggered when an image is completely loaded. event.detail = {height, width}
imgProps	ImgHTMLAttributes<HTMLImageElement>		No	Additional attributes for `img` tags

Property Support

Property	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
ImageProps.src	✔️	✔️	✔️	✔️	✔️	✔️
ImageProps.mode	✔️	✔️	✔️	✔️	✔️	✔️(Partial support scaleToFill, aspectFit, aspectFill, widthFix)
ImageProps.webp	✔️
ImageProps.lazyLoad	✔️	✔️	✔️	✔️
ImageProps.showMenuByLongpress	✔️
ImageProps.onError	✔️	✔️	✔️	✔️	✔️	✔️
ImageProps.onLoad	✔️	✔️	✔️	✔️	✔️	✔️
ImageProps.imgProps					✔️

mode

Valid values of mode

Value	Description
scaleToFill	A scale mode, where the image is scaled without maintaining the aspect ratio to fully stretch to fill the screen with elements of the image.
aspectFit	A scale mode, where the image is scaled with the aspect ratio unchanged to fully display its longer edge. In this case, the image can be completely displayed.
aspectFill	A scale mode, where the image is scaled with the aspect ratio unchanged to fully display its shorter edge. In this case, the image is completely displayed in the horizontal or vertical direction, and it is truncated in the other direction.
widthFix	A scale mode, where the width of the image remains unchanged with the height adjusted automatically, and the aspect ratio of the original image is maintained.
heightFix	A scale mode, where the height of the image remains unchanged with the width adjusted automatically, and the aspect ratio of the original image is maintained.
top	A clipping mode, where only the upper area of the image is displayed without scaling.
bottom	A clipping mode, where only the lower area of the image is displayed without scaling.
center	A clipping mode, where only the central area of the image is displayed without scaling.
left	A clipping mode, where only the left area of the image is displayed without scaling.
right	A clipping mode, where only the right area of the image is displayed without scaling.
top left	A clipping mode, where only the upper left area of the image is displayed without scaling.
top right	A clipping mode, where only the upper right area of the image is displayed without scaling.
bottom left	A clipping mode, where only the lower left area of the image is displayed without scaling.
bottom right	A clipping mode, where only the lower right area of the image is displayed without scaling.

API Support

API	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
Image	✔️	✔️	✔️	✔️	✔️	✔️