התמונות בטעינה
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
טעינת תמונה מהדיסק
אפשר להשתמש בקומפוזיציה Image כדי להציג גרפיקה במסך. כדי לטעון תמונה (לדוגמה: PNG, JPEG, WEBP) או משאב וקטורי מהדיסק, משתמשים ב-API painterResource עם הפניה לתמונה. לא צריך לדעת את סוג הנכס, פשוט משתמשים ב-painterResource בשינויים Image או paint.
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() כדי לטעון Bitmap. מידע נוסף על ImageBitmap זמין בקטע ImageBitmap לעומת ImageVector.
תמיכה ב-Drawable
painterResource תומך כרגע בסוגים הבאים של רכיבי drawable:
טעינת תמונה מהאינטרנט
כדי לטעון תמונה מהאינטרנט, אפשר להשתמש בספריות צד שלישי שזמינות לכם כדי לטפל בתהליך. ספריות לטעינת תמונות עושות בשבילכם את רוב העבודה הקשה. הן מטפלות גם בשמירת נתונים במטמון (כדי שלא תורידו את התמונה כמה פעמים) וגם בלוגיקה של הרשת כדי להוריד את התמונה ולהציג אותה על המסך.
לדוגמה, כדי לטעון תמונה באמצעות Coil מ-Instacart, מוסיפים את הספרייה לקובץ gradle ומשתמשים ב-AsyncImage כדי לטעון תמונה מכתובת URL:
AsyncImage(
model = "https://example.com/image.jpg",
contentDescription = "Translated description of what the image contains"
)
סליל
ספרייה לטעינת תמונות שמגובה על ידי Kotlin Coroutines (Instacart).
Glide
ספרייה מהירה ויעילה לטעינת תמונות ב-Android, שמתמקדת בגלילה חלקה (Google).
מקורות מידע נוספים
מומלץ
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-08-28 (שעון 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-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)"]]
