在微信小程序中展示图片,可以通过以下几种方法:
使用小程序的`image`组件
在页面的`.wxml`文件中添加`image`组件,并通过`src`属性指定图片的路径或网络地址。
可以使用`style`属性自定义图片的高度和宽度。
上传图片并展示
使用`wx.chooseImage`方法选择图片,并将选择的图片路径保存到页面数据中。
在`.wxml`文件中添加一个图片标签,并使用`src`绑定到选择的图片路径。
可以使用`wx.previewImage`方法预览图片。
图片上传和展示的完整流程
在页面的`.js`文件中定义选择图片和预览图片的函数。
使用`wx.chooseImage`选择图片,并在成功回调中获取图片路径。
将图片路径保存到页面数据中,并在`.wxml`文件中使用`image`组件展示。
如果需要上传图片到服务器,可以使用`wx.uploadFile`方法。
index.wxml:
```html
```
index.js:
```javascript
Page({
data: {
imageUrl: ''
},
chooseImage: function() {
var that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
var tempFilePaths = res.tempFilePaths;
that.setData({
imageUrl: tempFilePaths
});
},
fail: function(err) {
console.log(err);
}
});
},
imageLoad: function(e) {
console.log('Image loaded', e.detail);
},
imageError: function(e) {
console.log('Image error', e.detail);
}
});
```
通过以上步骤和代码,你可以在微信小程序中实现图片的选择、预览和展示功能。