Mini Program
  • 中文
  • EN
取消
Development
  • 中文
  • EN
中文
EN
取消
  • Components

    • # image

    Start from base library version 1.0.0. Please remaining backward compatible.

    WeChat Windows edition: Support

    WeChat Mac edition: Support

    # Functional description

    Picture. Support JPG、PNG、SVG、WEBP、GIF Etc., 2.3.0 Support for cloud file IDs.

    # Property Dxplaination

    Skyline List only the connection with the WebView The difference between the attributes that are not listed and the WebView Consistent.

    attribute type Default value Required Introductions Minimum version
    src string no Photo Resource Address 1.0.0
    mode string scaleToFill no Image cropping, scaling mode 1.0.0
    Legal value Introductions Minimum version
    scaleToFill Zoom mode, which scales the image without maintaining the aspect ratio, so that the width and height of the image are completely stretched to fill image element
    aspectFit Zoom mode, keeping the aspect ratio of the zoom image, so that the long side of the image can be fully displayed. In other words, the picture can be displayed completely.
    aspectFill Zoom mode, which keeps the aspect ratio of the zoom image, only ensures that the short side of the image is fully displayed. That is, the picture is usually complete only in the horizontal or vertical direction, and the other direction will be truncated.
    widthFix Zoom mode, the width is unchanged, the height automatically changes, keeping the original aspect ratio unchanged
    heightFix Zoom mode, the height is constant, the width automatically changes, and the aspect ratio of the original image is unchanged. 2.10.3
    top Crop mode, does not zoom the picture, only shows the top area of the picture
    bottom Crop mode, does not zoom the picture, only shows the bottom area of the picture
    center Crop mode, does not scale the picture, only shows the middle area of the picture
    left Crop mode, does not zoom the picture, only shows the left area of the picture
    right Crop mode, does not zoom the picture, only shows the right area of the picture
    top left Crop mode, does not scale the picture, only the upper left of the picture
    top right Crop mode, does not zoom the picture, only the top right area of the picture
    bottom left Crop mode, does not scale the picture, only the lower left area of the picture
    bottom right Crop mode, does not scale the picture, only the lower right area of the picture
    webp boolean false no Default does not parse webP Format, only supports network resources 2.9.0
    lazy-load boolean false no The picture is lazy to load, and it starts to load when it is about to enter a certain range (up and down three screens) 1.5.0
    show-menu-by-longpress boolean false no Long press picture display to send to a friend, collection, save pictures, search a search, open business cards/Go to Group Chat/Open the menu of the Mini Program (if the image contains the corresponding QR code or Mini Program code). 2.7.0
    binderror eventhandle no Triggered when an error occurs, event.detail = {errMsg} 1.0.0
    bindload eventhandle no Triggers when the picture is finished loading, event.detail = {height, width} 1.0.0

    # Support long press identification code

    type Introductions Minimum version
    Mini Program code
    WeChat Personal Code 2.18.0
    WeCom Personal Code 2.18.0
    Ordinary group code Refers to the group that contains only WeChat users 2.18.0
    Interworking group code Refers to a group that has both WeChat users and WeCom users 2.18.0
    Official Account message template two-dimensional barcode 2.18.0

    # Bug & Tip

    1. tip: image component default width 320px, height 240px
    2. tip: When the image component is scaled, the calculated width and height may have decimals, and the decimals may be erased from rendering under different webview kernels

    # sample code

    Preview with Developer Tool

    # Original drawing

    image