Examples of WeChat mini-app Image components are described in detail.

Examples of the mini-program Image component are described in detail.

The image component is also indispensable for a program. In this way, the image component in an app can be seen everywhere. Generally, image can be loaded in two ways. The first is network image, and the second is local image resources, are specified using the src attribute.

Key attributes:

Three scaling Modes

Nine shear methods

Wxml

<! -- 3: scaleToFill does not maintain the aspect ratio of the scaled image, so that the width and height of the image are fully stretched to fill the image Element aspectFit to maintain the aspect ratio of the scaled image, make the long side of the image completely displayed. That is to say, the image can be completely displayed. AspectFill maintains the aspect ratio of the scaled image and only ensures that the short side of the image is fully displayed. --> <view> aspectFit maintains the aspect ratio of the scaled image, only ensure that the short side of the image is fully displayed </view> <image style = "width: 100%; height: 100%" mode = "aspectFit" src = ".. /.. /image/image.jpg "/> <! -- In the cropping mode, the top image is not scaled. Only the bottom in the top area of the image is displayed. The top right top left bottom right bottom left is displayed. --> <view> bottom does not scale the image, show only the bottom area of the image </view> <image style = "width: 100%; height: 100%" mode = "bottom" src = ".. /.. /image/image.jpg "/> <view> left: only the left area of the image is displayed. </view> <image style =" width: 100%; height: 100% "mode =" left "src = ".. /.. /image/image.jpg "/> <view> top right: only the upper right corner of the image is displayed. </view> <image style =" width: 100%; height: 100% "mode =" top right "src = ".. /.. /image/image.jpg "/>

Related Articles:

Hello WeApp icon component
Window text Component switch component
Tabss component action-sheet
Application lifecycle button Component modal component
Page lifecycle checkbox component toast component
Modular Details form component details loading component
Data Binding input component navigator component
View component picker component audio component
Scroll-view component radio component video component
Swiper component slider component Image component