이미지 로드
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
디스크에서 이미지 로드
Image 컴포저블을 사용하여 화면에 그래픽을 표시합니다. 디스크에서 이미지(예: PNG, JPEG, WEBP) 또는 벡터 리소스를 로드하려면 이미지 참조와 함께 painterResource API를 사용합니다. 애셋 유형을 알 필요는 없습니다. Image 또는 paint 수정자에서 painterResource를 사용하면 됩니다.
DrawScope:
Image(
painter = painterResource(id = R.drawable.dog),
contentDescription = stringResource(id = R.string.dog_content_description)
)
앱에 액세스할 수 있도록 하려면 화면의 시각적 요소에 contentDescription을 제공합니다. TalkBack에서 콘텐츠 설명을 읽어 주므로 소리 내 읽고 번역했을 때 텍스트가 의미를 지니는지 확인해야 합니다. 위의 예에서는 stringResource()를 사용하여 strings.xml 파일에서 번역된 콘텐츠 설명을 로드합니다. 화면의 시각적 요소가 순수하게 시각적 장식용인 경우 스크린 리더에서 contentDescription을 null로 설정하여 무시합니다.
하위 수준의 ImageBitmap 관련 기능이 필요한 경우 ImageBitmap.imageResource()를 사용하여 비트맵을 로드할 수 있습니다. ImageBitmap에 관한 자세한 내용은 ImageBitmap과 ImageVector 비교 섹션을 참고하세요.
드로어블 지원
painterResource는 현재 다음과 같은 드로어블 유형을 지원합니다.
인터넷에서 이미지 로드
인터넷에서 이미지를 로드하는 경우 이 프로세스를 처리하는 데 도움이 되는 서드 파티 라이브러리를 사용할 수 있습니다. 이미지 로드 라이브러리는 여러 까다로운 작업을 처리합니다. 이미지를 다운로드하여 화면에 표시하기 위해 캐싱(이미지를 여러 번 다운로드하지 않아도 됨) 및 네트워킹 로직을 모두 처리합니다.
예를 들어 Instacart에서 Coil로 이미지를 로드하려면 라이브러리를 gradle 파일에 추가하고, AsyncImage를 사용하여 URL에서 이미지를 로드합니다.
AsyncImage(
model = "https://example.com/image.jpg",
contentDescription = "Translated description of what the image contains"
)
Coil
Kotlin 코루틴에서 지원하는 이미지 로드 라이브러리(Instacart)
Glide
부드러운 스크롤에 중점을 두었으며 빠르고 효율적인 Android용 이미지 로드 라이브러리(Google)
추가 리소스
추천 서비스
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-08-25(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-08-25(UTC)"],[],[],null,["# Loading images\n\nLoad an image from the disk\n---------------------------\n\nUse the [`Image`](/reference/kotlin/androidx/compose/foundation/package-summary#Image) composable to display a graphic on screen. To load an image\n(for example: PNG, JPEG, WEBP) or vector resource from the disk, use the\n[`painterResource`](/develop/ui/compose/quick-guides/content/load-images?hl=en) API with your image reference. You don't need to know the type\nof the asset, just use `painterResource` in `Image` or `paint` modifiers.\n\n`DrawScope`:\n\n\n```kotlin\nImage(\n painter = painterResource(id = R.drawable.dog),\n contentDescription = stringResource(id = R.string.dog_content_description)\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/LoadingImagesSnippets.kt#L49-L52\n```\n\n\u003cbr /\u003e\n\nTo ensure that your app is [accessible](/develop/ui/compose/accessibility), supply a `contentDescription` for\nvisual elements on screen. TalkBack reads out the content description, so you\nmust ensure that the text is meaningful if read out loud and translated. In the\nabove example, a `stringResource()` is used to load up the translated content\ndescription from the `strings.xml` file. If your visual element on screen is\npurely for visual decoration, set your `contentDescription` to `null` for the\nscreen reader to ignore it.\n\nIf you need lower-level `ImageBitmap` specific functionality, you can use\n`ImageBitmap.imageResource()` to load up a Bitmap. For more information on\nImageBitmaps, read the [ImageBitmap versus ImageVector](/develop/ui/compose/graphics/images/compare) section.\n\n### Drawable support\n\n`painterResource` currently supports the following drawable types:\n\n- [`AnimatedVectorDrawable`](/reference/android/graphics/drawable/AnimatedVectorDrawable)\n- [`BitmapDrawable`](/reference/android/graphics/drawable/BitmapDrawable) (PNG, JPG, WEBP)\n- [`ColorDrawable`](/reference/android/graphics/drawable/ColorDrawable)\n- [`VectorDrawable`](/reference/android/graphics/drawable/VectorDrawable)\n\nLoad an image from the internet\n-------------------------------\n\nTo load an image from the internet, there are several third-party libraries\navailable to help you handle the process. Image loading libraries do a lot of\nthe heavy lifting for you; they handle both caching (so you don't download the\nimage multiple times) and networking logic to download the image and display it\non screen.\n\nFor example, to load an image with [Coil](https://github.com/coil-kt/coil#jetpack-compose)\nfrom Instacart, add the library to your gradle file, and use an `AsyncImage` to load an image from a URL:\n\n\n```kotlin\nAsyncImage(\n model = \"https://example.com/image.jpg\",\n contentDescription = \"Translated description of what the image contains\"\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/LoadingImagesSnippets.kt#L60-L63\n```\n\n\u003cbr /\u003e\n\n[### Coil](https://github.com/coil-kt/coil#jetpack-compose)\n\nAn image loading library backed by Kotlin Coroutines (Instacart). \n[](https://search.maven.org/artifact/io.coil-kt/coil-compose \"Maven version of the library\") \n[### Glide](https://bumptech.github.io/glide/int/compose.html)\n\nA fast and efficient image loading library for Android focused on smooth scrolling (Google). \n[](https://search.maven.org/artifact/com.github.bumptech.glide/compose \"Maven version of the library\")\n\nAdditional resources\n--------------------\n\n- [Load and display images](/develop/ui/compose/quick-guides/content/load-images?hl=en)\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Resources in Compose](/develop/ui/compose/resources)\n- [Accessibility in Compose](/develop/ui/compose/accessibility)\n- [Graphics in Compose](/develop/ui/compose/graphics/draw/overview)"]]
