[Android/Compose]: Compose AsyncImage, 컴포즈 Url, Uri로 이미지 로딩시키기

Compose에서 Url, Uri를 통해 이미지를 불러오기 위해서는 Image 가 아닌 AsyncImage를 통해 이미지를 Loading 시켜야합니다.

그렇기 위해서는 대표적으로 Coil, Glide라는 써드파티 이미지 라이브러리를 활용해야하는데요, 예제는 Coil을 사용한 예제입니다.

// build.gradle(app)
implementation("io.coil-kt:coil-compose:2.4.0")


// Screen
AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = null,
)

위 예제와 같이 coil라이브러리를 추가해 준 후에 AscyncImage 내부에 model 파라메터로 Image를 로딩할 수 있는 어떠한 Url, Uri 를 불러오게 하면 됩니다.

AsyncImage는 자동으로 이미지를 비동기적으로 로드하고 표시합니다. 이렇게 간단한 몇 줄의 코드로 원격 이미지를 쉽게 로드하고 표시할 수 있습니다.

참고 자료: https://developer.android.com/jetpack/compose/graphics/images/loading