載入並顯示圖片

如要在應用程式中顯示內容圖片和使用者動作的回應，請從磁碟或網際網路上的外部來源載入圖片。您可以透過下列方式載入圖片：

• 從磁碟
• 透過使用 Coil 的網路
• 透過使用 Glide 的網路

結果

版本相容性

這項實作作業需要將專案 minSDK 設為 API 級別 21 以上。

從磁碟載入圖片

您可以從磁碟載入本機儲存的圖片，在應用程式中顯示這些圖片，並回應使用者操作。

依附元件

載入圖片

使用下列程式碼，從磁碟載入本機儲存的圖片，以便在應用程式中顯示：

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
LoadingImagesSnippets.kt

程式碼重點

• 已定義的 Compose Image 物件，且 painter 屬性設為 painterResource()，可從應用程式資源載入圖片。
• contentDescription，TalkBack可讀取，讓使用者更容易使用您的應用程式。
• stringResource()，用於從 strings.xml 檔案載入翻譯內容說明。

透過網路載入圖片

您可以使用 Coil 或 Glide，載入儲存在網際網路上的外部圖片。如要為專案選擇要使用的程式庫，請考量專案需求和效能限制等因素。

使用 Coil 載入圖片

您可以使用第三方程式庫 Coil，從網際網路載入圖片。Coil 由 Kotlin 協同程式支援，負責從主執行緒載入圖片，並在載入後顯示圖片。請按照這份指南，使用 Coil 從網際網路載入圖片。

依附元件

載入圖片

使用下列程式碼，透過 Coil 載入圖片：

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)
LoadingImagesSnippets.kt

使用 Glide 載入圖片

您可以使用 Glide 載入儲存在網路上外部位置的圖片，並在應用程式動態消息中顯示這些圖片。Glide 是快速又有效率的 Android 圖片載入程式庫，旨在提供順暢捲動體驗，並負責從主執行緒載入圖片，載入完成後即會顯示。

依附元件

載入圖片

使用下列程式碼，透過 Glide 載入圖片：

GlideImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)
LoadingImagesSnippets.kt

包含本指南的集合

本指南是精選快速指南系列的一部分，涵蓋更廣泛的 Android 開發目標：

顯示圖片

瞭解如何運用明亮吸睛的視覺元素，為 Android 應用程式打造精美外觀和風格。

快速指南集錦

如有問題或想提供意見

前往常見問題頁面，瞭解快速指南或與我們聯絡，分享您的想法。

前往常見問題 提供意見回饋