How to get the width and height of the image in WeChat applet

origin

Recently, I am working on requirement A, in which there is a small function point described as follows: return a picture from the configuration end, and expect the width to remain unchanged (750) and the height to adapt to the picture.

I thought

// For ease of explanation, bind css as style attribute [not recommended] && hard-code the value of src [can be changed to the value returned by the interface later]
<view style="width:100%;">
 <image src="{{src}}"></image>
</view>

What I thought of at first was: setting the width of the content area: 100% will automatically fill the screen width, and the height will be adaptive.

Actual effect: The space occupied by the image is: screen width x 0

Solution

Core: Solve how to get the height of the image

Primary Plan

Key point: Get the corresponding image information after the image is loaded.

After checking the applet development documentation, I found that there is a callback for successful loading, as follows:

The demo is as follows:

// wxml
<view style="width:100%;" >
 <image src="https://sf3-ttcdn-tos.pstatp.com/img/mosaic-legacy/3796/2975850990~300x300.image" bindload="loadSuccess" style="width:{{imageWidth}}px; height:{{imageHeight}}px"></image>
</view>

//js
Page({
 data: {
 imageHeight: 0,
 imageWidth: 0
 },
 loadSuccess(e){
 const { detail: {width, height} } = e
 this.setData({
  imageWidth: width,
  imageHeight:height
 })
 }
})

Let’s take a look at the effect first:

Think about this: If I have 100 images that need to be adapted, will there be a lot of cumbersome setData() calls, which will also cause performance problems.

Advanced Solution

After a friend reminded me, I found that the mini program image has a property called mode, which can be used to set the image cropping and scaling.

The possible values ​​for the mode attribute are as follows:

Without further ado, let's see what the actual effect is:

// 750x110 image <view style="width:100%;" >
 <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></image>
</view>

// 750x480 image <view style="width:100%;" >
 <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba1f75f0d29c40759b43ef910dacb4e7~tplv-k3u1fbpfcp-watermark.image" mode="widthFix"></image>
</view>

Take a look at the 750x110 rendering:

Let’s take a look at the 750x480 effect picture:

At this point, you only need to change the value of src to the value returned by the interface, and the requirements of fixed width and adaptive height will be met.

at last

This property is mainly to achieve image adaptability. In other words, it is mainly to ensure that the image is not distorted.

This is the end of this article about how to obtain the width and height of an image in WeChat Mini Program. For more information about how to obtain the width and height of an image in WeChat Mini Program, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!