如何在 Jetpack Compose 中使用 Coil 加载远程 SVG 图像

Question

我无法在Jetpack Compose 中使用 Coil加载此图像Image

Answer 1

Coil 默认不支持 SVG。

根据文档，您需要：

1. 添加以下依赖：

   implementation("io.coil-kt:coil-svg:$coil_version")
   

2. 设置SvgDecoder为解码器：

   线圈2.0.0版本：

   AsyncImage(
       model = ImageRequest.Builder(LocalContext.current)
           .data(svgImageUrl)
           .decoderFactory(SvgDecoder.Factory())
           .build(),
       contentDescription = null
   )
   

   线圈1.4.0版本：

   Image(
       rememberImagePainter(
           data = svgImageUrl,
           builder = {
               decoder(SvgDecoder(LocalContext.current))
           }
       ),
       contentDescription = null
   )
   

ps 请注意，如果您以这种方式设置解码器，Coil 将无法在此画家中处理非 SVG 图像，因此如果您想要一些通用解决方案，您应该检查 url 扩展名并相应地添加解码器。

Answer 2

我正在开发Jetpack Compose应用程序，从远程 API 收到的 url 包含.png/jpeg和.svg文件扩展名。

我添加了 Coil Compose 和 SVG 风格的依赖项，Coil Version 2.0.0这是截至 2023 年 1 月的最新版本。

// Coil
implementation("io.coil-kt:coil-compose:2.2.2")
implementation("io.coil-kt:coil-svg:2.2.2")

然后我链接decoderFactory(SvgDecoder.Factory())到 Image.Request 构建器。

val painter = rememberAsyncImagePainter(
                model = ImageRequest.Builder(context = context)
                    .data(urlPng or urlSvg)
                    .decoderFactory(SvgDecoder.Factory())
                    .error(R.drawable.empty_flag)
                    .placeholder(R.drawable.empty_logo)
                    .build()
            )

            Image(painter = painter ....)
            

@jendress.components { add(SvgDecoder.Factory())}提到的更新后的调用在我的情况下没有得到解决，所以我选择了.decoderFactory()

两个 url 都运行良好，.png/.jpeg并且.svg渲染了正确的图像，没有错误。