WeChat applet development image loading (local, network) example code

This article mainly introduces the relevant information on detailed examples of image loading (local, network) in the WeChat applet. Friends in need can refer to the following.

In the WeChat applet, to display a picture, There are two ways to load images:

1. Load local images
   

2. Load Network pictures

Load local pictures

<image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> 
</image>

src= "/image/arrowright.png" This sentence is to load local image resources. Think about loading local images in iOS, imageName:, similar.

Loading network pictures

WeChat is still very good at loading the network, including the loading of voice and video. Directly attach the address to the 'src' attribute and it will be loaded automatically.

<image class="image_frame" src="{{imageUrl}}" mode="aspectFill"> 
</image>

This imageUrl is the data in the js file

data:{ 
  imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg" 
},

can also be written directly as

<image class="image_frame" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill"> 
</image>

Let’s take a look at some attributes of image

It should be noted that: The default width of the image component is 300px and the height is 225px

src is used in the above code.

mode has 12 modes, 3 of which are zoom modes and 9 are cropping modes.

For specific instructions, it is recommended to read the official documentation, which is very detailed.

It’s very simple.

Legacy issues

In practice, I want to implement such a function: click a button to reload the image.

I don’t know how to directly operate the image in the js file. You may know it in the future. If anyone knows the method, please feel free to leave a message.

Supplement

The answers to the remaining questions have been found.

In the key response method, you can directly use setData to set a new address for imageUrl

downLoadImage:function(event){ 
  console.log(event) 
  var that = this; 
  this.setData({ 
    imageUrl:"http://h.hiphotos.baidu.com/zhidao/pic/item/6d81800a19d8bc3ed69473cb848ba61ea8d34516.jpg" 
  }) 
 }

The effect is as follows:

Thank you for reading, I hope it can help you, thank you for your support of this site!

The above is the detailed content of WeChat applet development image loading (local, network) example code. For more information, please follow other related articles on the PHP Chinese website!