微信小程序开发工具调用本地图片

微信小程序开发工具是一个很好用的工具，允许开发者在开发小程序时进行开发、调试和发布。在小程序中，有时候需要使用本地图片来进行展示或者是其他的操作。因此，本文将介绍如何在微信小程序开发工具中调用本地图片。

在小程序中，我们通常会使用 `` 标签来展示图片。如果这些图片是放在项目文件夹中的，我们可以使用相对路径来引用这些图片。例如：

```html

```

这里我们将图片放在了项目的 images 文件夹中，并通过相对路径来引用它。

但是有时候，我们需要动态加载图片，或者是将图片放在设备上，而不是放在项目的文件夹中。这时，我们可以通过以下两种方式来调用本地图片：

### 通过网络路径来调用本地图片

我们可以通过网络路径来加载本地图片。具体来说，我们可以先将本地图片上传到一个可访问的网络地址，然后在小程序中通过这个网络地址来引用这张图片。具体操作如下：

1. 将本地图片上传至网络地址。我们可以使用一些免费的图片上传网站如 [sm.ms](https://sm.ms/) 或 [imgbb](https://imgbb.com/) 等。

2. 获取上传后的网络地址，并用 `` 标签引用这个网络地址。

```html

```

这里我们使用了 [sm.ms](https://sm.ms/) 网站上传了一张图片，并将其网络地址用在了 `` 标签中。

使用以上方法需要注意的是，稍微大一点的图片可能会导致加载速度变慢，影响用户体验。

### 通过 wx.chooseImage() API 来调用本地图片

`wx.chooseImage()` 是一个微信小程序提供的 API，可以让用户从相册或者拍照中选择图片，并返回图片的本地临时文件路径。我们可以利用这个 API 获取到本地图片并将其用在 `` 标签中。具体操作如下：

1. 在 WXML 中放置一个按钮，并通过 `bindtap` 事件来触发图片选择功能。

```html

选择图片

```

2. 在 JS 中，编写 `chooseImage` 函数，使用 `wx.chooseImage()` API 来选择图片。

```javascript

Page({

chooseImage() {

wx.chooseImage({

success: res => {

const tempFilePaths = res.tempFilePaths[0];

this.setData({

imageUrl: tempFilePaths

});

}

});

}

});

```

这段代码会将选择的本地图片的路径存在 `tempFilePaths` 中，并使用 `setData` 函数更新 `imageUrl` 变量的值，以便后续在 `` 标签中使用。

使用以上方法需要注意的是，用户需要手动选择图片，操作相对麻烦，而且需要用户授权，不是很适合在所有场景中使用。

综上所述，使用网络地址或者 `wx.chooseImage()` API 均可实现在微信小程序开发工具中调用本地图片。根据实际需求选择适合的方法即可。