微信小程序里面顯示圖片會用到 image 組件，該組件默認寬度300px斜棚、高度225px阀蒂，使用時需要自己設(shè)置寬度 width、高度 height 以及圖片資源地址 src弟蚀。當(dāng)圖片資源為本地圖片時蚤霞，可以先查看其寬高，再設(shè)置為 image 的 width 和 height义钉，但是當(dāng)圖片是從網(wǎng)絡(luò)上加載昧绣，并不能提前確定其寬高時，需要考慮怎樣才能使其自動適應(yīng)寬高捶闸，并按期望顯示滞乙。
image 有一個 mode 屬性，該屬性有 13 種模式鉴嗤，其中 4 種是縮放模式序调，9 種是裁剪模式：
縮放模式：
scaleToFill 不保持縱橫比縮放圖片醉锅，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來发绢。也就是說边酒，可以完整地將圖片顯示出來坯认。
aspectFill 保持縱橫比縮放圖片引润，只保證圖片的短邊能完全顯示出來痒玩。也就是說缆毁，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
widthFix 寬度不變浇雹，高度自動變化，保持原圖寬高比不變
裁剪模式：
top 不縮放圖片祝旷，只顯示圖片的頂部區(qū)域
bottom 不縮放圖片吻谋，只顯示圖片的底部區(qū)域
center 不縮放圖片戒祠，只顯示圖片的中間區(qū)域
left 不縮放圖片栋操，只顯示圖片的左邊區(qū)域
right 不縮放圖片闸餐，只顯示圖片的右邊區(qū)域
top left 不縮放圖片，只顯示圖片的左上邊區(qū)域
top right 不縮放圖片，只顯示圖片的右上邊區(qū)域
bottom left 不縮放圖片，只顯示圖片的左下邊區(qū)域
bottom right 不縮放圖片烈疚，只顯示圖片的右下邊區(qū)域
一般情況下從網(wǎng)絡(luò)上加載圖片時黔牵，由于圖片的尺寸未知，為了防止圖片過寬或過長爷肝，因此不會完全按照圖片的尺寸設(shè)置寬高荧止，而是給定一個最大的寬度和高度，目標(biāo)是將圖片按照原始比例并在合適的可視范圍內(nèi)顯示阶剑。
首先為 image 的 bindload 屬性綁定一個方法，該方法會在圖片加載完成時調(diào)用危号，從而獲取圖片尺寸牧愁，當(dāng)圖片尺寸獲取到后，根據(jù)最大寬高計算最終的尺寸外莲，并保存在 data 中定義的數(shù)據(jù)中猪半，之后在 image 中通過 style 屬性將 width 和 height 設(shè)置為保存的數(shù)據(jù)即可。另外由于圖片可能加載失敗偷线，那么可以綁定binderror屬性磨确，在加載失敗時設(shè)置 width 和 height，避免 image 的尺寸不符合預(yù)期声邦，也可以在 data 中設(shè)置期望的加載失敗時的寬高乏奥。代碼如下：
<image src="{{pic}}" style="width:{{picSize.width}}rpx;height:{{picSize.height}}rpx;" bindload="imageLoad" />
Page({
data: {
picSize: { "width": 320, "height": 320}
},
imageLoad: function (e) {
var maxSize = 320;
var imgWidth = e.detail.width;
var imgHeight = e.detail.height;
var ratio = imgWidth / imgHeight;
var picSize;
if (imgWidth >= imgHeight && imgWidth > maxSize) {
// 如果是寬圖并且寬度超過最大寬度，則以最大寬度作為最終寬度并按原始比例計算高度
picSize = { "width": maxSize, "height": maxSize/ ratio };
} else if (imgHeight > imgWidth && imgHeight > maxSize) {
// 如果是長圖并且高度超過最大高度亥曹，則以最大高度作為最終高度并按原始比例計算寬度
picSize = { "width": maxSize* ratio, "height": maxSize};
} else {
// 如果寬高都在最大限度之內(nèi)則最終寬高為圖片的原始尺寸
picSize = { "width": imgWidth, "height": imgHeight };
}
this.setData({
picSize: picSize
})
}
})
