Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge about how to use WeChat Mini Programs's image component library. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

WeChat Mini Programs image

Pictures.

The default value of the attribute name type indicates the srcString picture resource address modeString'scaleToFill' picture cropping and scaling mode binderrorHandleEvent when an error occurs, the event name posted to AppService, event object event.detail = {errMsg: 'something wrong'} bindloadHandleEvent when the picture is loaded, the event name posted to AppService, event object event.detail = {height:' picture height px', width:' picture width px'

}

Note: image component default width 300px, height 225px

Valid values for mode:

There are 13 modes in mode, of which 4 are zoom mode and 9 are cropping mode.

Mode value indicates that zooming scaleToFill does not maintain the aspect ratio to scale the picture, so that the width and height of the picture is fully stretched to fill the image element zoom aspectFit maintains the aspect ratio to zoom the picture, so that the long edge of the picture can be fully displayed. In other words, the picture can be displayed completely. Zoom aspectFill to maintain the aspect ratio to zoom the picture, only to ensure that the short edge of the picture can be fully displayed. In other words, the picture is usually complete only in the horizontal or vertical direction, and the other direction will be intercepted. Zoom widthFix width unchanged, height automatically change, keep the original picture aspect ratio unchanged crop top do not scale the picture, only show the top area of the picture crop bottom do not scale the picture, only show the bottom area of the picture crop center do not scale the picture, only show the middle area of the picture crop left does not scale the picture, only show the left area of the picture crop right does not scale the picture, only show the right side of the picture crop top left does not scale the picture Show only the upper left region of the picture crop top right does not scale the picture, only show the upper right side of the picture cropping bottom left does not scale the picture, only show the lower left side of the picture crop bottom right does not scale the picture, only show the lower right side of the picture

Example:

Image picture {{item.text}} Page ({data: {array: [{mode: 'scaleToFill', text:' scaleToFill: zoom the picture without maintaining the aspect ratio, making the picture fully fit'}, {mode: 'aspectFit', text:' aspectFit: zoom the picture with the aspect ratio maintained So that the long edge of the picture can be fully displayed'}, {mode: 'aspectFill', text:' aspectFill: keep the aspect ratio to zoom the picture, only ensure that the short edge of the picture can be fully displayed'}, {mode: 'top', text:' top: do not zoom the picture, only show the top area of the picture'}, {mode: 'bottom', text:' bottom: do not zoom the picture Show only the bottom area of the picture'}, {mode: 'center', text:' center: do not zoom the picture, only show the middle area of the picture'}, {mode: 'left', text:' left: do not zoom the picture, only show the left area of the picture'}, {mode: 'right', text:' right: do not zoom the picture Show only the area on the right side of the picture'}, {mode: 'top left', text:' top left: do not zoom the picture, only show the upper left area of the picture'}, {mode: 'top right', text:' top right: do not zoom the picture, only show the upper right area of the picture'}, {mode: 'bottom left', text:' bottom left: do not zoom the picture Show only the lower left area of the picture'}, {mode: 'bottom right', text:' bottom right: do not zoom the picture, only show the lower right area of the picture'}], src:'.. / resources/cat.jpg'}, imageError: function (e) {console.log (error event occurs in 'image3 Carry value is', e.detail.errMsg)}}) above is "how to use WeChat Mini Programs image component Library" all the content of this article, thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.