2.wxml代碼↓

<view>  
  <text>imagetext>  
  <view>  
    <view wx:for="{{array}}" wx:for-item="item">  
      <view class="imageText">{{item.text}}view>  
      <view class="imageContent">  
        <image class="imageStyle" mode="{{item.mode}}" src="{{src}}" binderror='imageError'>image>  
      view>  
    view>  
  view>  
view>  

①array中mode定義了圖片的裁剪、縮放模式，text定義了圖片的注解，src圖片源，均在js文件中進(jìn)行定義。

data: {  
    src: '../../resources/image/bing.jpg',  
    array: [{  
      mode: 'scaleToFill',  
      text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素'  
    }, {  
      mode: 'aspectFit',  
      text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。'  
    }, {  
      mode: 'aspectFill',  
      text: 'aspectFill:保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。'  
    }, {  
      mode: 'widthFix',  
      text: 'widthFix:寬度不變，高度自動變化，保持原圖寬高比不變'  
    }, {  
      mode: 'top',  
      text: 'top：不縮放圖片，只顯示圖片的頂部區(qū)域'  
    }, {  
      mode: 'bottom',  
      text: 'bottom：不縮放圖片，只顯示圖片的底部區(qū)域'  
    }, {  
      mode: 'center',  
      text: 'center：不縮放圖片，只顯示圖片的中間區(qū)域'  
    }, {  
      mode: 'left',  
      text: 'left：不縮放圖片，只顯示圖片的左邊區(qū)域'  
    }, {  
      mode: 'right',  
      text: 'right：不縮放圖片，只顯示圖片的右邊邊區(qū)域'  
    }, {  
      mode: 'top left',  
      text: 'top left：不縮放圖片，只顯示圖片的左上邊區(qū)域'  
    }, {  
      mode: 'top right',  
      text: 'top right：不縮放圖片，只顯示圖片的右上邊區(qū)域'  
    }, {  
      mode: 'bottom left',  
      text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區(qū)域'  
    }, {  
      mode: 'bottom right',  
      text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區(qū)域'  
    }]  
  },  

②binderror監(jiān)聽圖片錯誤，在js中實現(xiàn)，查看錯誤信息

imageError: function (e) {  
    console.log('============================================')  
    console.log('image發(fā)生error事件，攜帶值為', e.detail.errMsg)  
    console.log('============================================')  
  }  

如，設(shè)定一個無法訪問的src，控制臺輸出如下信息↓

3.效果圖
（1）縮放模式

①scalToFill模式：完全適應(yīng)image的width及height（在該例中，分別為280px和150px）
②asprctFit模式：按比例縮小，完整的將圖片顯示出來，多余的部分由背景色#ddd補(bǔ)充
③aspectFill模式：按比例縮小，保證至少一個方向完整顯示（紅色框約為被裁掉的部分）
④widthFix模式：寬度不變（該例中280px），高度自動變化，保證圖片完整顯示。
（2）裁剪模式，看兩個例子：

完整的對應(yīng)位置如下圖所示↓

5.最后附上wxss的代碼

.imageStyle {  
  width: 280px;  
  height: 150px;  
  background: #ddd;  
}  
.imageText {  
  margin-top: 20px;  
}  
.imageContent {  
  width: 100%;  
  height: 100%;  
  display: flex;  
  justify-content: center;  
}  

其中imageContent保證了圖片的性質(zhì)
justify-content：水平居中
align-items：豎直居中