定義
image為圖片組件。
說明
- <image> 組件默認寬度 300px、高度 225px；
app-nvue平台，暫時默認為屏幕寬度。 src僅支持相對路徑、絕對路徑，支持 base64 碼；- 頁面結構復雜，css樣式太多的情況，使用 image 可能導致樣式生效較慢，出現 “閃一下” 的情況，此時設置
image{will-change: transform},可優化此問題。 - 自定義組件里面使用 <image> 時，若
src使用相對路徑可能出現路徑查找失敗的情況，故建議使用絕對路徑。 - webp格式的圖片在Android上是內置支持的。iOS上不同平台不一樣，具體如下：app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，iOS支持。
- svg 格式的圖片在不同的平台支持情況不同。具體為：app-nvue 不支持 svg 格式的圖片，小程序上只支持網絡地址。
參數
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異 |
| src | String | 圖片資源地址 | ||
| mode | String | 'scaleToFill' | 圖片裁剪、縮放模式 | |
| lazy-load | Boolean | false | 圖片懶加載。只針對page與scroll-view下的image有效 | 微信小程序、百度小程序、字節跳動小程序 |
| fade-show | Boolean | true | 圖片顯示動畫效果 | 僅App-nvue 2.3.4+ Android有效 |
| webp | Boolean | false | 默認不解析 webP 格式，只支持網絡資源 | 微信小程序2.9.0 |
| show-menu-by-longpress | Boolean | false | 開啟長按圖片顯示識別小程序碼菜單 | 微信小程序2.7.0 |
| draggable | Boolean | true | 鼠標長按是否能拖動圖片 | 僅 H5 平台 3.1.1+ 有效 |
| @error | HandleEvent | 當錯誤發生時，發布到 AppService 的事件名，事件對象event.detail = {errMsg: 'something wrong'} | ||
| @load | HandleEvent | 當圖片載入完畢時，發布到 AppService 的事件名，事件對象event.detail = {height:'圖片高度px', width:'圖片寬度px'} |
mode的參數
mode 有 14 種模式，其中 5 種是縮放模式，9 種是裁剪模式。
| 模式 | 值 | 說明 |
| 縮放 | scaleToFill | 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 |
| 縮放 | aspectFit | 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。 |
| 縮放 | aspectFill | 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。 |
| 縮放 | widthFix | 寬度不變，高度自動變化，保持原圖寬高比不變 |
| 縮放 | heightFix | 高度不變，寬度自動變化，保持原圖寬高比不變 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基礎庫 2.10.3 |
| 裁剪 | top | 不縮放圖片，只顯示圖片的頂部區域 |
| 裁剪 | bottom | 不縮放圖片，只顯示圖片的底部區域 |
| 裁剪 | center | 不縮放圖片，只顯示圖片的中間區域 |
| 裁剪 | left | 不縮放圖片，只顯示圖片的左邊區域 |
| 裁剪 | right | 不縮放圖片，只顯示圖片的右邊區域 |
| 裁剪 | top left | 不縮放圖片，只顯示圖片的左上邊區域 |
| 裁剪 | top right | 不縮放圖片，只顯示圖片的右上邊區域 |
| 裁剪 | bottom left | 不縮放圖片，只顯示圖片的左下邊區域 |
| 裁剪 | bottom right | 不縮放圖片，只顯示圖片的右下邊區域 |