Android Jetpack Compose 顯示網路圖片(使用 Coil 套件)

本次是使用 Coil 套件，先在 build.gradle(Module :app) 引用:

    
dependencies {
    implementation("io.coil-kt:coil-compose:2.4.0")
}
    

可能是因為剛下班太累，也可能是因為太久沒有寫 Android，筆者一開始測試的時候 App 一開啟就直接停止運作，試了很多次都是，後來去看 log 出現下面的錯誤，才想到需要宣告網路權限。

    
2023-07-20 22:38:07.812 17837-17876 AndroidRuntime
E  FATAL EXCEPTION: OkHttp Dispatcher
Process: com.example.snackbartest, PID: 17837
java.lang.SecurityException: Permission denied (missing INTERNET permission?)
    

在 AndroidManifest.xml 宣告需要使用到網路權限:

    
<uses-permission android:name="android.permission.INTERNET" />
    

最簡單範例: (網址會產生隨機內容的圖片)

    
AsyncImage(
    model = "https://picsum.photos/200/300",
    contentDescription = "內容說明",
)

    

其他範例:

    
AsyncImage(
    model = "https://picsum.photos/200/300",
    contentDescription = "內容說明",
    placeholder = painterResource(R.drawable.ic_launcher_background), // 佔位圖，沒有載入完成前顯示
    contentScale = ContentScale.FillBounds, // 圖片縮放模式 (填滿)
    modifier = Modifier
        .width(300.dp)
        .height(300.dp) // 指定長寬
)

    

註： AsyncImage 預設會啟用快取，會記錄之前載入過的圖片。

參考資料：
Github - coil-kt/coil
Coil - Jetpack Compose