عنصر Compose Image محدّد تم ضبط سمة painter فيه على
painterResource() لتحميل صورة من موارد التطبيق
contentDescription يمكن لـ TalkBack قراءتها لجعل تطبيقك أكثر
سهولة الاستخدام
stringResource() لتحميل وصف المحتوى المترجَم من ملف
strings.xml
تحميل صورة عبر الشبكة
يمكنك تحميل الصور المخزّنة خارجيًا على الإنترنت باستخدام Coil أو
Glide. لاختيار المكتبة التي تريد استخدامها في مشروعك، يجب مراعاة عوامل مثل
متطلبات المشروع والقيود المفروضة على الأداء.
تحميل صورة باستخدام Coil
يمكنك تحميل الصور من الإنترنت باستخدام Coil، وهي مكتبة
تابعة لجهة خارجية. تستند Coil إلى وظائف Kotlin المتزامنة، وتتحمّل مسؤوليةتحميل الصورة بعيدًا عن سلسلة المهام الرئيسية، وتعرضها بعد تحميلها. اتّبِع
هذه الإرشادات لتحميل الصور من الإنترنت باستخدام Coil.
التبعيات
تحميل الصورة
استخدِم الرمز البرمجي التالي لتحميل الصور باستخدام Coil:
AsyncImage(model="https://example.com/image.jpg",contentDescription="Translated description of what the image contains")
يمكنك تحميل الصور المخزّنة خارجيًا على الإنترنت باستخدام
Glide لعرضها في خلاصة تطبيقك. Glide هي مكتبة سريعة و
فعّالة لتحميل الصور على أجهزة Android تركّز على الانتقال السلس للأسفل والأعلى، وتحمل مسؤولية تحميل الصورة بعيدًا عن سلسلة المهام الرئيسية، ثم تعرِضها بعد تحميلها.
التبعيات
تحميل الصورة
استخدِم الرمز البرمجي التالي لتحميل الصور باستخدام Glide:
GlideImage(model="https://example.com/image.jpg",contentDescription="Translated description of what the image contains")
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-02-22 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-02-22 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Load and display images\n\n\u003cbr /\u003e\n\nTo display images in your app for content and for responses to user actions,\nload the images from the disk or from an external source on the internet. You\ncan load images the following ways:\n\n- From the disk\n- From a network using Coil\n- From a network using Glide\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nLoad an image from the disk\n---------------------------\n\nYou can load locally stored images from the disk to display them in your app for\ncontent and to respond to user actions.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\n### Load the image\n\nUse the following code to load a locally stored image from the disk to display\nin your app:\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\n#### Key points about the code\n\n- A defined Compose [`Image`](/reference/kotlin/androidx/compose/foundation/package-summary#Image) object with a `painter` attribute set to a [`painterResource()`](/reference/kotlin/androidx/compose/ui/res/package-summary#painterresource) that loads an image from app resources.\n- A `contentDescription` that `TalkBack` can read to make your app more accessible.\n- A `stringResource()` to load translated content description from the `strings.xml` file.\n\nLoad an image over the network\n------------------------------\n\nYou can load images stored externally on the internet using either Coil or\nGlide. To choose which library to use for your project, consider factors such as\nproject requirements and performance constraints.\n\n### Load an image using Coil\n\nYou can load images from the internet using [Coil](https://coil-kt.github.io/coil/), a third-party\nlibrary. Coil is backed by Kotlin coroutines, and takes responsibility for\nloading the image away from the Main thread, and displays it once loaded. Follow\nthis guidance to load images from the internet using Coil.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"io.coil-kt:coil-compose:2.6.0\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation 'io.coil-kt:coil-compose:2.6.0'\n \n```\n\n\u003cbr /\u003e\n\n#### Load the image\n\nUse the following code to load images using Coil:\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### Load an image using Glide\n\nYou can load images stored externally on the internet using\n[Glide](https://github.com/bumptech/glide) to display them in your app's feed. Glide is a fast and\nefficient image loading library for Android focused on smooth scrolling, and\ntakes responsibility for loading the image away from the Main thread, and\ndisplays it once loaded.\n\n#### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"com.github.bumptech.glide:compose:1.0.0-beta01\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation 'com.github.bumptech.glide:compose:1.0.0-beta01'\n \n```\n\n\u003cbr /\u003e\n\n#### Load the image\n\nUse the following code to load images using Glide:\n\n\n```kotlin\nGlideImage(\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#L72-L75\n```\n\n\u003cbr /\u003e\n\nResults\n-------\n\n:dog: **Figure 1.** An image loaded and displayed.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display images\n\nDiscover techniques for using bright, engaging visuals to give your Android app a beautiful look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-images) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
