微信小程序作为一种轻量级应用程序，已经受到越来越多开发者的青睐。图片作为小程序开发中不可或缺的一部分，也有它独特的使用方法和技巧。本文将从多个方面对微信小程序图片进行详细的阐述，帮助开发者更好地使用小程序图片功能。
一、本地图片
本地图片指的是小程序项目内的图片资源。在小程序开发中，我们可以使用
<image>标签来显示本地图片。下面是一个简单的例子：
<image src="/images/avatar.jpg">
其中，
/images/avatar.jpg为本地图片资源的相对路径。在小程序中，本地图片路径中不需要包含主机名或协议名。如果需要在小程序中使用本地图片，需要先在
app.json中的
pages字段列表中添加图片路径，如下所示：
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/about/about",
"pages/img/img"
],
"subPackages":[{
"root":"pages/sub",
"pages":[
"index/index"
]
}],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}, {
"pagePath": "pages/about/about",
"text": "关于"
}, {
"pagePath": "pages/img/img",
"text": "图片"
}]
},
"usingComponents": {}
在上述代码中，
pages/img/img表示图片页面的路径。我们在这个页面中使用
<image>标签来展示图片，如下所示：
<image src="/images/avatar.jpg">
本地图片可以随着小程序一同打包，省去了请求远程图片的时间和流量。但是，如果图片过多或比较大，会对小程序的加载速度产生影响。
二、远程图片
远程图片指的是从服务器上请求的图片资源。在小程序开发中，我们同样可以使用
<image>标签来显示远程图片。如下所示：
<image src="https://example.com/avatar.jpg">
在上述代码中，
https://example.com/avatar.jpg为远程图片的URL。需要注意的是，在小程序中，使用远程图片需要在
app.json文件中声明允许跨域请求的白名单。
三、预览图片
在小程序中，可以通过自定义事件和微信API来实现预览图片的功能。我们可以先为图片绑定一个
tap事件：
<image src="{{imgUrl}}" mode="aspectFit" bind:tap="previewImage">
在
bind:tap="previewImage"中，
previewImage为我们自定义的事件名称。接下来，在我们的
page.js文件中编写相应的事件处理函数：
Page({
data: {
imgUrl: "https://example.com/avatar.jpg"
},
previewImage: function (e) {
var current = e.target.dataset.src;
wx.previewImage({
current: current,
urls: [this.data.imgUrl]
})
}
})
在上述代码中，我们通过
wx.previewImage函数来实现图片预览功能。其中，
current表示当前预览的图片URL，
urls表示预览图片的URL数组。
四、优化图片加载
为了提高小程序的加载速度，我们可以对小程序图片进行优化。常见的图片优化方式有以下几种： 1. 图片压缩：可使用在线工具或本地压缩工具对图片进行压缩，减小图片体积。 2. 图片懒加载：在小程序中，我们可以通过
wx.createIntersectionObserver和
observer.relativeToViewport().observe('selector', (res) => {})函数来实现图片懒加载。在用户滚动时，将未出现在视图中的图片设为不可见，当图片出现在视图中时再将其设为可见。 3. 使用WebP格式：WebP格式是一种新型的图片格式，相比于JPEG等传统格式，WebP格式的图片体积更小，在保证图片质量的情况下，能大幅减少图片的加载时间。
五、图片上传
小程序中的用户上传功能建立在微信开放能力之上，需要先获取用户授权。在用户上传图片后，我们可以通过
wx.chooseImage函数来获取用户选择的图片，并通过
wx.uploadFile函数来将图片上传至服务器。具体实现可以参考以下代码：
// 获取用户授权
wx.getSetting({
success(res) {
if (!res.authSetting['scope.record']) {
wx.authorize({
scope: 'scope.record',
success() {
console.log('用户已授权')
}
})
}
}
})
// 选择图片
wx.chooseImage({
success(res) {
const tempImagePath = res.tempFilePaths[0]
// 上传图片
wx.uploadFile({
url: 'https://example.com/upload',
filePath: tempImagePath,
name: 'image',
success(res) {
console.log('上传成功')
console.log(res.data)
}
})
}
})
可以通过
scope.record来获取用户授权，授权成功后就可以调用
wx.chooseImage函数来选择要上传的图片。然后使用
wx.uploadFile函数来将图片上传至服务器。
总结
本文从多个方面对微信小程序图片进行了详细的阐述，介绍了本地图片、远程图片、预览图片、优化图片加载和图片上传等功能。对于初学者来说，这些知识点都是非常重要的，相信通过本文的学习，大家已经有了更深入的了解和掌握。
