如何在 Jetpack Compose 中使用来自 URI 的 Coil 加载图像

Question

我使用的是最新版本的 Coil：

implementation("io.coil-kt:coil-compose:2.0.0-rc01")

我想将条形码标签图像加载到我的 Jetpack Compose 文件中，例如：

Box(modifier = Modifier.background(Color.DarkGray).fillMaxSize()) {
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data("https://www.researchgate.net/profile/Adnan-Ghaffar/publication/313103370/figure/fig3/AS:456489858015234@1485847071322/An-example-of-barcode.png")
            .crossfade(true)
            .build(),
        contentDescription = "barcode image",
        contentScale = ContentScale.Crop,
        modifier = Modifier
    )

}

这很好用，当我尝试从 URI 加载图像时出现问题，如下所示：

http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz

但它不起作用，例如我试过的代码：

Box(modifier = Modifier.background(Color.DarkGray).fillMaxSize()) {
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data("http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz")
            .crossfade(true)
            .build(),
        contentDescription = "barcode image",
        contentScale = ContentScale.Crop,
        modifier = Modifier
    )
}

有关如何在 labelary

上创建标签 .png 的更多信息

Answer 1

根据Network security configuration，我认为是HTTP地址，

创建文件 res/xml/network_security_config.xml:

<?xml version ="1.0" encoding ="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:networkSecurityConfig="@xml/network_security_config"
        ...>
        ...
    </application>
</manifest>

如何在 Jetpack Compose 中使用来自 URI 的 Coil 加载图像

How to load an image with Coil from URI in jetpack compose

android

android-jetpack-compose

coil