The Little Things: Didn’t read the manual

This series is dedicated to the little things in programming that make you want to bang your head against the wall. Today’s post is about: when you didn’t read the manual.

Attempting to load an image

Loading an image with Jetpack Compose is straightforward. Since I use the Coil image loading library when developing apps with Android Views, I decided to do the same with Compose. The instructions couldn’t be simpler.

Import the extension library.

implementation("io.coil-kt:coil-compose:2.7.0")

Then use the AsyncImage composable to load and display an image.

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = null,
)

I dutifully added the extension and dropped the new composable into my layout.

Column(
   modifier = Modifier
      .fillMaxSize()
      .padding(innerPadding),
   verticalArrangement = Arrangement.Center,
   horizontalAlignment = Alignment.CenterHorizontally
) {
    AsyncImage(
        model = "https://bit.ly/android_dev_image1",
        modifier = Modifier.size(300.dp),
        contentScale = ContentScale.Fit,
        contentDescription = "friendly robot"
    )
}

Instead of a cute friendly robot, I had a blank screen. 🙃 Thus began my descent into madness.

Getting to the root of the problem

In these situations I tend to remove variables one-by-one. I dropped the modifier and then the contentScale on the image composable. Still no image.

Next, I thought maybe the bit.ly redirection was causing the problem. So I dropped in the exact URL, “https://api.dicebear.com/8.x/bottts/svg?seed=Bubba“. No dice.

Maybe my image was corrupt? Tried random online tools. The image was fine. What gives?! 🧐 Next, I tried a different image, “https://2873199.youcanlearnit.net/images/chili_bottle.webp“. And it loaded! But I didn’t want a giant bottle of olive oil, I wanted my cute robot.

So I stared into the darkness of my Dracula-themed IDE. There was something fundamentally missing. The AsyncImage composable could load WebP images, but not SVG? 👀 I was ready to message the maintainer. But…

Before I took such a bold stand, I decided to read the documentation again. Specifically I just searched SVG. And wouldn’t you know, SVGs require a little special treatment. 🤦🏽‍♀️

I dusted off the keyboard. Then I added the SVG extension library and the ImageLoaderFactory implementation.

And yeah, it worked! My SVG image was loaded properly. I had my cute little robot and was on with my day. 🤖

Just one of those little things. fin