微信小程序 图片加载（本地，网路）实例详解

微信小程序中的图片加载实例详解

在微信小程序中，图片加载是一个重要的功能，主要涉及两种方式：加载本地图片和加载网络图片。这篇文章将为大家详细介绍这两种方式。

一、加载本地图片

加载本地图片非常简单，只需要设置图片的src属性为本地图片资源的路径即可。例如，可以使用如下代码加载一张名为“arrowright.png”的本地图片：

```html

```

类似于iOS中的加载本地图片方式，通过指定图片名（不带扩展名）即可加载对应的图片资源。

二、加载网络图片

微信对加载网络图片进行了很好的封装，只需将图片的src属性设置为网络图片的URL即可自动加载。例如：

```html

```

这里的imageUrl是在js文件中定义的数据，例如：

```javascript

data:{

imageUrl:"

}

```

也可以直接写成：

```html

```

微信小程序中的image组件默认宽度为300px、高度为225px。除了src属性，image组件还有mode属性，它决定了图片的缩放和裁剪方式。具体的使用方式和说明可以参考官方文档。

三、遗留问题与解答

在实践中，有时需要实现点击按钮重新加载图片的功能。对于这个问题，可以在按键的响应方法中直接使用setData给imageUrl设定新的地址来实现。例如：

```javascript

downLoadImage:function(event){

console.log(event)

var that = this;

this.setData({

imageUrl:"

})

}

```