how to make Compose Preview display image/vector resources loaded from web?

Question

I use Coil to load .svg resources from the web, for example:

@Composable
fun Widget(modifier: Modifier = Modifier) {
    AsyncImage(
        modifier = Modifier.fillMaxSize(),
        model = ImageRequest.Builder(LocalContext.current)
            .decoderFactory(SvgDecoder.Factory())
            .data("https://www.svgrepo.com/show/326168/circle-large.svg")
            .build(),
        contentDescription = null,
        contentScale = ContentScale.FillWidth
    )
}

It loads successfully when running on devices, but when running in Compose Preview, no resources is displayed. How to have Compose Preview load and display resources fetched from the Web?

Answer 1

I think the only work around is to manually set the image if it is a preview, like so:

if (isPreview) {
     Image(
         painterResource(id = R.drawable.my_test_image),
         ...
     )
 } else {
     AsyncImage(
         ...
     )
 }