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

Question

I am using the latest version of Coil:

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

I would like to load a barcode label image to my Jetpack Compose file for example like so:

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
    )

}

This works fine the issue appears when I try to load an image from a URI like the follow one:

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

But it does not work, for example code I tried:

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
    )
}

More info on how to create a label .png on labelary

Vicegerent

Please, provide the error message you are getting when trying to load the first mentioned resource – Disparage

I have mentioned that in first case it works as expected. On second case it does not load anything I do not get any error... You can copy paste the code it is very easy to reproduce the cases... – Vicegerent

Answer 1

According to Network security configuration , I think it's the HTTP address,

Create file 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>

Deracinate

Actually it is - or I changed the http to https, thank you :) – Vicegerent