8

I am working on a Jetpack Project which downloads an image from API using Coil Library.

I have confirmed that valid image URLs and related data are being returned from the API call successfully. I am able to view the image on my browser using the returned URL.

This is my Image Composable:

@Composable
fun AstroPhoto(picture: AstroPicture) {

    val imgUrl = picture.url.toUri()
            .buildUpon()
            .scheme("https")
            .build()
    
    AsyncImage(model = ImageRequest.Builder(LocalContext.current)
            .data(imgUrl)
            .size(Size.ORIGINAL)
            .crossfade(true).build(),

            placeholder = painterResource(R.drawable.loading_animation),
            contentDescription = picture.title,
            contentScale = ContentScale.Crop,
    )
}

I call the above image composable in a Lazy Column:

....
 Box( ... ) {
            
           LazyColumn(content = {
               
               items(state.astroPictures) {
               
                AstroPhoto(picture = it)
            } })
            
        }

This is the exception at I am getting:

FATAL EXCEPTION: main Process: com.uxstate, PID: 31790 java.lang.IllegalArgumentException: Only VectorDrawables and rasterized asset types are supported ex. PNG, JPG at androidx.compose.ui.res.PainterResources_androidKt.loadVectorResource(PainterResources.android.kt:93)

I am on compose_version = '1.1.1' working with kotlin_version = '1.6.10'. My coil version is "io.coil-kt:coil-compose:2.1.0" and compileSdk 32 and AS Chipmunk. Source code can be found here.

I have checked the docs and searched online but cannot resolve the error. Please help me to go about the error, Thanks.

Tonnie
  • 4,865
  • 3
  • 34
  • 50
  • 1
    I have used [This](https://developer.android.com/jetpack/compose/resources#animated-vector-drawables) . Though its loading the animation but placeholder is only being visible right before image was loaded . Not sure why (i tried loading a 2 MB image to test with cache disabled) .. – ADM Jun 11 '22 at 08:58
  • 1
    @ADM Good Tip, the error is now gone but the image is not animated as anticipated. – Tonnie Jun 11 '22 at 15:12
  • Something new?? – Vemu Jun 14 '22 at 19:48

7 Answers7

4

My project worked correctly before, but after I changed some code (just add a fucntion, it is not about png or jpg or other things about image), my app crash when render a png. But after i reinstall the project in the emulator, it is fixed. It seems like a bug in Compose? I dont know, may be a bug in gradle? Just try to reinstall your app, i think it will be fixed.

JeckOnly
  • 347
  • 2
  • 10
4

This appears to be a Jetpack Compose bug

For the time being I've been able to fix this issue in my own project by using an AndroidView to render an ImageView.

In the case of you needing to asynchronously load images, you could render a Glide imageview or something similar

fun AppImage(
    modifier: Modifier = Modifier,
    @DrawableRes resource: Int,
    colorFilter: ColorFilter? = null
) {
    AndroidView(
        modifier = modifier,
        factory = { context ->
        ImageView(context).apply {
            setImageResource(resource)
            setColorFilter(colorFilter?.asAndroidColorFilter())
        }
    },
        update = {
            it.setImageResource(resource)
            it.colorFilter = colorFilter?.asAndroidColorFilter()
        }
    )
}
alfietap
  • 1,585
  • 1
  • 15
  • 38
3

Just encountered this error and see if anyone had the same error as me.

I just re-opened the Android Studio, and after that, I use Clean Project and Rebuild Project. Now the project and the compose preview are working fine.

Akmal Rafi
  • 41
  • 3
  • Same here! Before you try any crazy workarounds, see if a simple restart fixes it. – Max Jul 28 '23 at 18:38
1

if you are using png and jpg with painterResource but still face this issue. Change your image, It happened when there is something wrong with the image.

painterResource converts png, and jpg in the bitmap. Its throws that error if it fails to convert any Resource

Wajahat iqbal Waji
  • 69
  • 3
  • 2
    This seems to only happens on certain devices as opposed to it being the image, which would means its a jetpack compose bug – alfietap Feb 24 '23 at 05:28
1

Tried to use shape drawable as a placeholder and it caused this error.

If I set the same placeholder to ImageRequest.Builder instead, the code works fine.

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(imageUrl)
        .placeholder(R.drawable.placeholder_rect)
        .error(R.drawable.placeholder_rect)
        .build(),
    contentDescription = "",
)
Yaroslav Yermolenko
  • 124
  • 1
  • 5
0

in my previous projects, there is no problem passing drawable resources to painterResource function. But when I create a new jetpack-compose project, the problem you describe occurs.

In my new project, this problem only happens in preview phase. When I firstly build and run my app in emulator, the problem suddenly disappears.

so this is my solution: if you haven't run you app in emulator, build and run it in emulator.

maxLanShang
  • 1
  • 1
0

My issue was that the image was 187 MB and the app was running into an OutOfMemoryError. I had to use Glide and this answer to scale the image before loading it.

Sam
  • 261
  • 2
  • 11