1 學習組件Image的用法

Image是圖片組件，用來渲染展示圖片。

除支持通用屬性外，還支持如下屬性：

啟動DevEco Studio，新建一個項目或者打開之前的項目。這裡我們以之前創建的項目Components為例。在項目窗口中右鍵單擊pages目錄，新建一個JS Page，取名imagepage

将一張圖片複制到 entry > src > main > js > default > common > images 目錄下，例如下圖所示（可以直接把圖片拖拽過來）

在電腦上快速定位到images目錄并打開的方法是，右鍵單擊images目錄，選擇 打開于 > Explorer。

1 創建Image組件

<!-- imagepage.hml --> <div class="container"> <image src="common/images/bird.jpg"></image> </div>

/* imagepage.css */ .container { flex-direction: column; justify-content: center; align-items: center; }

2 設置Image樣式

Image組件除支持通用樣式外，還支持如下屬性：

object-fit 類型說明

使用svg圖片資源時：

• 建議設置image組件的長寬，否則在父組件的長或寬為無窮大的場景下，svg資源将不會繪制；
• 如果svg描述中未指定相應的長寬，則svg将會填滿image組件區域；

• 如果svg描述中指定了相應的長寬，和image組件本身的長寬效果如下：

1. 如果image組件本身的長寬小于svg中的長寬，svg會被裁切，僅顯示左上角部分；
2. 如果image組件本身的長寬大于svg中的長寬，svg會被放置在image組件的左上角，image組件其他部分顯示空白。

通過設置width、height和object-fit屬性定義圖片的寬、高和縮放樣式。

/* imagepage.css */ .container { flex-direction: column; justify-content: center; align-items: center; } image { width: 80%; height: 500px; border: 3px dotted red; border-radius: 30px; object-fit: contain; match-text-direction: true; }

3 顯示多張圖片

定義for循環展示多張圖片，同時定義select選擇圖片的展示方式。

<!-- imagepage.hml --> <div class="container"> <list> <list-item for="{{ url }}"> <image src="{{ $item }}" style="object-fit: {{ fit }};"></image> </list-item> </list> <select @change="setFit"> <option for="{{ fitList }}" value="{{ $item }}">{{ $item }}</option> </select> </div>

/* imagepage.css */ .container { flex-direction: column; align-items: center; justify-content: center; } list-item { justify-content: center; border: 2px solid blue; } image { width: 300px; height: 220px; padding: 5px; margin: 5px; border: 2px solid orange; } select { font-size: 40px; width: 300px; height: 160px; border: 2px solid red; margin-bottom: 20px; } option { font-size: 36px; }

// imagepage.js export default { data: { url: ['common/images/bird.jpg', 'common/images/fish.jpg'], fit: 'cover', fitList: ['cover', 'contain', 'fill', 'none', 'scale-down'] }, setFit(e) { this.fit = e.newValue; } }

4 組件Image事件

除支持通用事件外，還支持如下事件：

下面來看看加載圖片的實例。本實例圖片成功加載時觸發complete事件，返回加載的圖源尺寸。加載失敗則觸發error事件，打印圖片加載失敗。

<!-- imagepage.hml --> <div class="container"> <image src="common/images/bird.jpg" @complete="imageComplete(1)" @error="imageError(1)"> </image> <image src="common/images/bird1.jpg" @complete="imageComplete(2)" @error="imageError(2)"> </image> </div>

/* imagepage.css */ .container { flex-direction: column; align-items: center; justify-content: center; } image { width: 80%; height: 200px; align-items: center; margin: 5px; }

// imagepage.js import prompt from '@system.prompt'; export default { imageComplete(i, e) { prompt.showToast({ message: '圖片' i '的寬度為' e.width '，圖片' i '的高度為' e.height, duration: 3000 }); }, imageError(i, e) { setTimeout(() => { prompt.showToast({ message: '圖片加載失敗' i, duration: 3000 }); }, 3000); } }

至此，Image組件的基本用法已經介紹完了。

最後，老規矩，敲黑闆：多動手，多思考！代碼一定要親自動手敲出來！[呲牙][比心]

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!