Reactive call not working on tags$img(src = ?)

Question

Backstory: For my project I'm making a dashboard that makes it easy to get access to hotel information. Now I want it to work that if a rating is above a 9, it gets 4.5 star. If it is above an 8, it gets 4 stars. and so on. Now am I no code god, so getting this far already took me a lot of hours, but if I look at all sort of different tags$img code it all looks like I fixed it. But it's won't show an image. What is wrong with my code?

Problem: Eventhough I made the part where it fills in the code for 4 stars etc. it doesn't work. I even checked it in the console. The part where it selects the .PNG file based of the hotel score gives the right file and gives it back like "5stars.png" like tags$img needs. I even made a little code like so: tags$img(src = "5stars.png", height = 50, width = 200) which does work like that, but I want it to be "reactive" so it shows a different image for different ratings. So why doesn't it work, eventhough the console says it replaces textOutput("hotelImage") with the correct text?

My body code is:

tags$img(src = textOutput("hotelImage"), height = 50, width = 200)

Where the textOutput is decided like this:

output$hotelImage <- renderText({
 if(ratingGiver() > 9){
   '"5stars.png"'
 }else if (ratingGiver() > 8) {
   '"45stars.png"'
 }else if (ratingGiver() > 7) {
   '"4stars.png"'
 }else if (ratingGiver() > 6) {
   '"35stars.png"'
 }else if (ratingGiver() > 5) {
   '"3stars.png"'
 }else if (ratingGiver() > 4) {
   '"25stars.png"'
 }else if (ratingGiver() > 3) {
   '"2stars.png"'
 }else if (ratingGiver() > 2) {
   '"15stars.png"'
 }else if (ratingGiver() > 1) {
   '"1stars.png"'
 }else{
   '"0stars.png"'
 }
})

I've tried every possible method, from reactives to renderImage. May have missed a few, but I did really look for it.

My expectation was that for the hotel I choose, it goes through the if's and it selects the right on, then it fills the correct file path in the src = "5stars.png" for example, which would then load the image. With this code, it should work, because I checked and it pasts "5stars.png" at the textOutput("hotelImage") bit. I checked by letting it type textOutput("hotelImage"). But for some reason it still gives me the X image. What is incorrect? It pasts the right stuff.. Do I need different code?

Edit:

After some comment I got the advice to use a Reactive with a renderImage for a plotOutput. Which I then tried out: Below here you can see the reactive I made for that.

 ReactiveImage <- reactive({
    if(ratingGiver() > 9){
      '"5stars.png"'
    } else if (ratingGiver() > 8) {
      '"45stars.png"'
    }else if (ratingGiver() > 7) {
      '"4stars.png"'
    }else if (ratingGiver() > 6) {
      '"35stars.png"'
    }else if (ratingGiver() > 5) {
      '"3stars.png"'
    }else if (ratingGiver() > 4) {
      '"25stars.png"'
    }else if (ratingGiver() > 3) {
      '"2stars.png"'
    }else if (ratingGiver() > 2) {
      '"15stars.png"'
    }else if (ratingGiver() > 1) {
      '"1stars.png"'
    }else{
      '"0stars.png"'
    }
   })

Below here you can see the output for the renderImage:

output$RenderImage2 <- renderImage({
    tags$img(src = ReactiveImage(), height = 50, width = 200)
  })

And the code for the body:

plotOutput("RenderImage"),

Sadly, none of the code above seemed to fix my problem. I tried putting it into an observeEvent as well, to see whether that might do the trick. It didn't but I'll show the code anyway because maybe it's the trick but I made a mistake:

observeEvent(input$hotelMap_marker_click[[1]], { output$RenderImage2 <- 
renderImage({
    tags$img(src = ReactiveImage(), height = 50, width = 200)
  })
  })

renderText is for generating text to render in the browser, not to store character variables. You want to make that a reactive, then access that reactive value in your tags$img(src = — divibisan
Please edit your question instead of putting code in comments. You can click the edit button under the tags. As you've noticed, comments are terrible for code. That's why we let you freely edit your question with whatever additional information you need — divibisan

Jack Teuthof Jack Teuthof · Accepted Answer · 2019-01-17T17:07:22

Answer

After a bit of searching I ended up with this: Server:

 output$Imagen <- renderImage({
      if(ratingGiver() > 9){
        Leg <- "www/5stars.png"
      } else if (ratingGiver() > 8) {
        Leg <- "www/45stars.png"
      }else if (ratingGiver() > 7) {
        Leg <- "www/4stars.png"
      }else if (ratingGiver() > 6) {
        Leg <- "www/35stars.png"
      }else if (ratingGiver() > 5) {
        Leg <- "www/3stars.png"
      }else if (ratingGiver() > 4) {
        Leg <- "www/25stars.png"
      }else if (ratingGiver() > 3) {
        Leg <- "www/2stars.png"
      }else if (ratingGiver() > 2) {
        Leg <- "www/15stars.png"
      }else if (ratingGiver() > 1) {
        Leg <- "www/1stars.png"
      }else{
        Leg <- "www/0byebitchgone.png"
      }
      list(src=Leg, height = 90, width = 380)

    }, deleteFile = FALSE)

Body:

imageOutput(outputId="Imagen")

Reactive call not working on tags$img(src = ?)

1 Answers