tags$img not updating to display images in the UI

Viewed 27

I have created an app that uploads an image and displays it but noticed that it wasn't working properly anymore. When a second image is uploaded the UI doesn't refresh and only the original image is shown. It seems that tags$img is behaving different than it did before. The idea of the app is users are able to upload an image, confirm it is the correct one and then do some things to the image. It doesn't make sense for the user to upload a new image and still have the previous image displaying.

I noticed that when I use tags$iframe it works as expected, which is that when a 2nd image is uploaded the 2nd image is then displayed in the app. I noticed if I use tags$iframe and tags$img to display the same item it works as expected where the 2nd item uploaded is displayed.

This example only uses tags$img, if you upload an image then it displays it and when you upload a 2nd image only the first image is displayed. The UI doesn't seem to update to display the 2nd image.

library(shiny)

options(shiny.maxRequestSize=12*1024^2)

ui <- fluidPage(  
  sidebarLayout(
    sidebarPanel(
      uiOutput("ui_file_input")
    ),
    mainPanel(
      uiOutput("ui_upload")
    )
  )
)


server <- function(input, output) {
  
  rv <- reactiveValues(
    upload_state = NULL,
    img = NULL
  )
  
  output$ui_file_input <- renderUI({
    fileInput("upload",
              label = NULL,
              accept = c(".jpg", ".jpeg")
    )
  })
  
  observeEvent(input$upload, {
    rv$upload_state <- "upload"
  })

  observe({
    req(rv$upload_state)
    test_file <- readBin(con = input$upload$datapath, what = "raw", n = input$upload$size)
    writeBin(test_file, "www/fieldphoto.jpeg")
    addResourcePath("www", "www")
  })
  
  output$ui_upload <- renderUI({
    req(input$upload)
    tags$img(src = "www/fieldphoto.jpeg", width = "300px")
  })

}

shinyApp(ui = ui, server = server)

When I add a 2nd output that is linked to tags$iframe it behaves as expected. An image is uploaded and displays as normal and when a 2nd image is upload it updates to display the 2nd image in both the tags$img and tags$iframe outputs.

library(shiny)

options(shiny.maxRequestSize=12*1024^2)

ui <- fluidPage(
  
  sidebarLayout(
    
    sidebarPanel(
      uiOutput("ui_file_input")
    ),
    
    mainPanel(
      uiOutput("ui_upload"),
      uiOutput("ui_upload2")
    )
  )
)


server <- function(input, output) {
  
  rv <- reactiveValues(
    upload_state = NULL,
    img = NULL
  )
  
  output$ui_file_input <- renderUI({
    fileInput("upload",
              label = NULL,
              accept = c(".jpg", ".jpeg")
    )
  })
  
  observeEvent(input$upload, {
    rv$upload_state <- "upload"
  })

  observe({
    req(rv$upload_state)
    test_file <- readBin(
      con = input$upload$datapath, what = "raw", n = input$upload$size
    )
    writeBin(test_file, "www/fieldphoto.jpeg")
    addResourcePath("www", "www")
  })
  
  
  # this displays the uploaded card
  output$ui_upload <- renderUI({
    req(input$upload)
    tags$img(src = "www/fieldphoto.jpeg", width = "300px")
  })
  
  
  output$ui_upload2 <- renderUI({
    req(input$upload)
    tags$iframe(src = "www/fieldphoto.jpeg", width = "300px")
  })

}

shinyApp(ui = ui, server = server)

This was working as expected in the past, not sure the exact timeline but sometime with the last few months I think. The examples above are a simple reprex as the issue is part of a much larger Shiny app. I don't understand why tags$iframe causes the UI to update but not tags$img. The correct files are appearing in the www folder. It seems to be a problem with what is being displayed.

0 Answers
Related