Android Jetpack Compose中如何在预览组件时通过URI显示图片？

方法1：使用本地Drawable资源URI #

Android本地资源可以通过android.resource://格式的URI直接访问，把这个URI传给预览的uri参数即可。

修改预览代码：

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun TestViewPreview() {
    // 替换为你项目的包名和实际drawable资源名（无需后缀）
    val placeholderUri = "android.resource://com.your.app.package/drawable/placeholder_image"
    TestCompose(navController = rememberNavController(), uri = placeholderUri)
}

考虑到你的代码里做了URL解码，但本地资源URI不需要解码，可以给组件加个预览标记参数优化逻辑：

@Composable
fun TestCompose(navController: NavController, uri: String, isPreview: Boolean = false) {
    val targetUri = if (isPreview) {
        Uri.parse(uri)
    } else {
        val uriDecode = URLDecoder.decode(uri, StandardCharsets.UTF_8.toString())
        Uri.parse(uriDecode)
    }
    val painter = rememberAsyncImagePainter(
        ImageRequest
            .Builder(LocalContext.current)
            .data(data = targetUri)
            .build()
    )

    Image(
        painter = painter,
        contentDescription = "image",
        contentScale = ContentScale.Fit
    )
}

// 预览时传入isPreview=true
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun TestViewPreview() {
    val placeholderUri = "android.resource://com.your.app.package/drawable/placeholder_image"
    TestCompose(navController = rememberNavController(), uri = placeholderUri, isPreview = true)
}

方法2：使用网络图片URI #

如果不想添加本地资源，直接用公开的网络图片URL即可，Coil的rememberAsyncImagePainter在预览模式下也能加载网络图片：

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun TestViewPreview() {
    val placeholderUri = "https://picsum.photos/600/400" // 示例占位图
    TestCompose(navController = rememberNavController(), uri = placeholderUri)
}

方法3：写预览专用的包装组件 #

为了不修改原组件参数，可以单独写一个预览包装组件，内部处理占位逻辑：

@Composable
private fun TestComposePreviewWrapper() {
    val context = LocalContext.current
    val placeholderUri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE +
            "://" + context.packageName +
            "/drawable/placeholder_image")
    TestCompose(navController = rememberNavController(), uri = placeholderUri.toString())
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun TestViewPreview() {
    TestComposePreviewWrapper()
}

内容的提问来源于stack exchange，提问作者no13bus