Bilder werden geladen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Bild von der Festplatte laden
Mit der Image-Composable können Sie eine Grafik auf dem Bildschirm anzeigen. Wenn Sie ein Bild (z. B. PNG, JPEG, WEBP) oder eine Vektorressource von der Festplatte laden möchten, verwenden Sie die painterResource API mit Ihrem Bildverweis. Sie müssen den Typ des Assets nicht kennen. Verwenden Sie einfach painterResource in Image- oder paint-Modifikatoren.
DrawScope:
Image(
painter = painterResource(id = R.drawable.dog),
contentDescription = stringResource(id = R.string.dog_content_description)
)
Damit Ihre App barrierefrei ist, müssen Sie für visuelle Elemente auf dem Bildschirm eine contentDescription angeben. TalkBack liest die Inhaltsbeschreibung vor. Achten Sie daher darauf, dass der Text sinnvoll ist, wenn er vorgelesen und übersetzt wird. Im obigen Beispiel wird ein stringResource() verwendet, um die übersetzte Inhaltsbeschreibung aus der Datei strings.xml zu laden. Wenn Ihr visuelles Element auf dem Bildschirm nur zur visuellen Dekoration dient, setzen Sie contentDescription auf null, damit es vom Screenreader ignoriert wird.
Wenn Sie ImageBitmap-spezifische Funktionen niedrigerer Ebene benötigen, können Sie mit ImageBitmap.imageResource() eine Bitmap laden. Weitere Informationen zu ImageBitmaps finden Sie im Abschnitt ImageBitmap im Vergleich zu ImageVector.
Unterstützung für Drawables
painterResource unterstützt derzeit die folgenden Drawable-Typen:
Bild aus dem Internet laden
Wenn Sie ein Bild aus dem Internet laden möchten, können Sie dazu verschiedene Drittanbieterbibliotheken verwenden. Bibliotheken zum Laden von Bildern nehmen Ihnen viel Arbeit ab. Sie kümmern sich sowohl um das Caching (damit das Bild nicht mehrmals heruntergeladen wird) als auch um die Netzwerkanbindung, um das Bild herunterzuladen und auf dem Bildschirm anzuzeigen.
Wenn Sie beispielsweise ein Bild mit Coil von Instacart laden möchten, fügen Sie die Bibliothek Ihrer Gradle-Datei hinzu und verwenden Sie ein AsyncImage, um ein Bild über eine URL zu laden:
AsyncImage(
model = "https://example.com/image.jpg",
contentDescription = "Translated description of what the image contains"
)
Spule
Eine Bildladebibliothek, die von Kotlin-Coroutinen unterstützt wird (Instacart).
Glide
Eine schnelle und effiziente Bibliothek zum Laden von Bildern für Android, die auf reibungsloses Scrollen ausgelegt ist (Google).
Zusätzliche Ressourcen
Empfehlungen für dich
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-08-28 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-08-28 (UTC)."],[],[],null,["Load an image from the disk\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\nDrawable 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\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- [Load and display images](/develop/ui/compose/quick-guides/content/load-images?hl=en)\n\nRecommended for you\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)"]]
