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

Question

我无法使用 Jetpack Compose 中的 Coil 在 Image 中加载 this image

Answer 1

Coil 默认不支持 SVG。

根据documentation，您需要：

添加以下依赖：

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

设置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
)

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

Answer 2

添加新解码器的语法已从 1.4.0 更改为 2.x.x。

val imageLoader = ImageLoader.Builder(context)
.components {
    add(SvgDecoder.Factory())
}
.build()

您可以在这里找到最新的语法：https://coil-kt.github.io/coil/svgs/

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

How to load remote SVG image using Coil in Jetpack Compose

svg

kotlin

android-jetpack-compose

coil