3

I have a requirement to display different images based on certain user interactions. So, I'm storing the drawable resource ID in an integer variable. However, when I pass this variable into the Image's painterResource function the image is not rendered.

Code looks like this:

val img = R.drawable.img1
val img2 = R.drawable.img2

// imageToDisplay is assigned based on certain conditions.
var imageToDisplay = img

Image(painter = painterResource(imageToDisplay), contentDescription = null)
z.g.y
  • 5,512
  • 4
  • 10
  • 36
Varad G
  • 87
  • 7
  • Why are you using `var imageToDisplay = img` ? What is the exact condition that you are using? What kind of resource is `R.drawable.img1`? – Gabriele Mariotti Dec 04 '22 at 14:45
  • I think if you're gonna use `painterResource`, the resource would need to be a vector drawable or a similar XML drawable, otherwise you'll likely need to use `imageResource` – Richard Onslow Roper Dec 04 '22 at 15:10
  • @GabrieleMariotti, So that I can reassign the value based on certain user interactions. Like z.y pointed out, I really should be using a Mutable State variable here. And img1 is a vector drawable. – Varad G Dec 06 '22 at 00:40
  • @RichardOnslowRoper, yes, it is a vector drawable. – Varad G Dec 06 '22 at 00:41

1 Answers1

1

The code you provided is working "as it is" using available drawables in my end, unless you include more details then we can only guess, but when you said

I have a requirement to display different images based on certain user interactions. …

and

… imageToDisplay is assigned based on certain conditions.

and

… when I pass this variable into the Image's painterResource function the image is not rendered.

My best guess is the composable these codes are in is not re-composing or not updating for some reason when you perform some conditional action.

Again, we can only guess so you can try this or just use this as a reference.

@Composable
fun DynamicImageComposable() {

    val img = R.drawable.img
    val img2 = R.drawable.img

    // don't use ordinary variable, convert it to a mutable State instead
    var imageToDisplay by remember {
        mutableStateOf(img) // just use any drawable you want as the initial value
    }

    // when you change this to img2, this composable is expected to re-compose
    imageToDisplay = img

    Image(painter = painterResource(imageToDisplay), contentDescription = null)
}

The logic is a bit useless, but what its trying to point is using mutable state for a composable to re-compose.

z.g.y
  • 5,512
  • 4
  • 10
  • 36
  • 1
    I moved over the same code to a new project and the image rendered fine. I think this must be some configuration issue with the previous project. And yes, I really should be using MutableState in this case. Thanks! – Varad G Dec 06 '22 at 00:35
  • You couldn't have just said "Initialise the image holder variable as a `MutableState` state holder paired with `remember` since we're within the scope of a Composable."? – Richard Onslow Roper Dec 06 '22 at 01:31