Jetpack Compose: previewing bundled images

[ubuntudroid]

I'm using coil with Jetpack Compose to display bundled images (i.e. images referencable via R.drawable.*) and it works great.

However, it breaks Compose's preview (likely) due to the asynchronous handling: the image just doesn't show up in the preview. What's the best way to handle this? Maybe a special modifier (e.g. by making use of .placeholder()) which is only active in preview? Or are there other best practices?

[colinrtwhite]

Setting a placeholder normally should display in the preview.

[ubuntudroid]

Right, but will the placeholder still be loaded asynchronously when not running the app in preview mode? I'm referring to the situation described in #1387 . I want to benefit from asynchronous loading when not in preview, but also have the preview working. And in the best case avoid declaring the image resource twice (e.g. in placeholder() and data), but that's just a nice to have. 😉

[colinrtwhite]

Only the placeholder is used for displaying in the preview. This is because placeholder must be a resource, which means we're always able to load it in the preview environment. model is of type Any, which means we may not be able to load it in the preview environment. For simplicity and consistency, we don't attempt to load model in the preview environment. I would do something like this to achieve what you're looking for:

AsyncImage(
    model = R.drawable.image,
    placeholder = if (LocalInspectionMode.current) R.drawable.image else null,
    contentDescription = null
)

[ubuntudroid]

That should do the trick, many thanks! 🙏

[ubuntudroid]

Quick heads-up: the placeholder parameter is a painter, not a Any (like model) or resource ID.

[ubuntudroid]

I created a Composable which fits in nicely here:

@Composable
fun placeholderIfPreview(@DrawableRes drawableRes: Int): Painter? =
    if (LocalInspectionMode.current) rememberResourcePainter(drawableRes = drawableRes) else null

Use it like this:

AsyncImage(
    model = R.drawable.image,
    placeholder = placeholderIfPreview(drawableRes = R.drawable.image),
    contentDescription = null
)