#Compose 中的 Image
Compose的 "Image" 就是 Image 函式，那就來看看有什麼可以運用的吧

1. Image 基本的範例
   • 讀取 /res/drawable 內的圖片檔 (自行放入的android_developers圖)

 Image(
        painter = painterResource(id = R.drawable.android_developers),
        contentDescription = "android_developers",
        modifier = Modifier.fillMaxWidth()
    )

2. Image 參數
   • painter 有三種 BitmapPainter、BrushPainter和ColorPainter，常用的是BitmapPainter
   • contentDescription 宣告圖片名稱
   • modifier 變更可組合元件的大小、版面配置、行為和外觀
   • alignment 設定圖片對齊的參數
   • contentScale 設定圖片縮放比例
   • alpha 設定圖片的透明度
   • colorFilter 設定按鍵的外觀型狀，直接、圓角、多角(剪角)

Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
)

3. Image的使用方式

Image(
            painter = painterResource(id = R.drawable.android_developers),
            contentDescription = "android_developers",
            alignment = Alignment.Center,
            contentScale = ContentScale.Crop,
            alpha = 0.5f,
            colorFilter = ColorFilter.colorMatrix(ColorMatrix()),
            modifier = Modifier.fillMaxWidth()
        )

顯示結果

4. 從http 下載圖片image ，使用 Coil 套件

• AndroidManifest.xml 要記得加
  < uses-permission android:name="android.permission.INTERNET" />
• app 的 build.gradle 加
  implementation("io.coil-kt:coil-compose:2.2.1")

範例程式:

Image(
      painter = rememberAsyncImagePainter(model = "https://example.com/image.jpg"),
      contentDescription = null,
      ) 

顯示結果
preview又沒有顯示，模擬器和手機才有顯示下載的圖片

參考:

https://www.jetpackcompose.net/image-in-jetpack-compose
https://coil-kt.github.io/coil/compose/