Two image loading methods for WeChat mini programs

In the WeChat applet, to display an image, there are two image loading methods:

1. Load local images

2. Load network images

Load local images

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

src="/image/arrowright.png" This sentence is 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"
},

It 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 the 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. Click to open the link

It’s very simple.

##Left issues

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

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 remaining questions have been answered.

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:

Recommended: "

小program development tutorial"

The above is the detailed content of Two image loading methods for WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!