開發(fā)者經(jīng)常需要在應(yīng)用中顯示一些圖片性芬，例如：按鈕中的icon强重、網(wǎng)絡(luò)圖片、本地圖片等。在應(yīng)用中顯示圖片需要使用Image組件實現(xiàn)，Image支持多種圖片格式俺祠，包括png、jpg借帘、bmp蜘渣、svg和gif，具體用法請參考Image組件肺然。
Image通過調(diào)用接口來創(chuàng)建蔫缸，接口調(diào)用形式如下：
Image(src: PixelMap | ResourceStr | DrawableDescriptor)
加載圖片資源
Image支持加載存檔圖、多媒體像素圖兩種類型狰挡。
- 本地資源
創(chuàng)建文件夾捂龄，將本地圖片放入ets文件夾下的任意位置。
Image組件引入本地圖片路徑加叁，即可顯示圖片（根目錄為ets文件夾）
// 本地資源,圖片位置ets/image
Image('image/icon.png').width(100)
-
網(wǎng)絡(luò)資源
引入網(wǎng)絡(luò)圖片需申請權(quán)限ohos.permission.INTERNET倦沧，具體申請方式請參考聲明權(quán)限。此時它匕，Image組件的src參數(shù)為網(wǎng)絡(luò)圖片的鏈接展融。Image組件首次加載網(wǎng)絡(luò)圖片時，需要請求網(wǎng)絡(luò)資源豫柬，非首次加載時告希，默認(rèn)從緩存中直接讀取圖片，更多圖片緩存設(shè)置請參考setImageCacheCount烧给、setImageRawDataCacheSize燕偶、setImageFileCacheSize。
Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/0603public/sj-next-pc.jpeg')
.width(200)
- Resource資源
使用資源格式可以跨包/跨模塊引入圖片础嫡，resources文件夾下的圖片都可以通過$r資源接口讀 取到并轉(zhuǎn)換到Resource格式指么。
media.png
調(diào)用方式(推薦這種方式)：
Image($r('app.media.background.png'))
還可以將圖片放在rawfile文件夾下。
rawfile.png
調(diào)用方式：
Image($rawfile('startIcon.png'))
設(shè)置圖片縮放類型
通過objectFit屬性使圖片縮放到高度和寬度確定的框內(nèi)榴鼎。
Column(){
// 縮放
Image($r('app.media.background'))
.width(300)
// 保持寬高比進行縮小或者放大伯诬，使得圖片完全顯示在顯示邊界內(nèi)。
// .objectFit(ImageFit.Contain)
// 保持寬高比進行縮小或者放大巫财，使得圖片兩邊都大于或等于顯示邊界盗似。
// .objectFit(ImageFit.Cover)
// 自適應(yīng)顯示。
// .objectFit(ImageFit.Auto)
// 不保持寬高比進行放大縮小平项，使得圖片充滿顯示邊界赫舒。
// .objectFit(ImageFit.Fill)
// 保持寬高比顯示，圖片縮小或者保持不變闽瓢。
// .objectFit(ImageFit.ScaleDown)
// 保持原有尺寸顯示号阿。
.objectFit(ImageFit.None)
}.backgroundColor(Color.Gray).width('100%').height(500)
