1

I am trying to update divs while in a loop, some of which contain images. Using removeUI(..., immediate = TRUE) I can remove them and then replace them by new divs, with insertUI(..., immediate = TRUE). Although the texts appear in real time, the images do not load until we are out of the loop (see example below, you don't even have to load an image, a question mark will appear after the loop ends).

In my browser I can see the img tags are created in HTML, but still no images appear live.

Here is a reproducible example:

ui <- fluidPage(
  actionButton("add","")
)
server <- function(input, output, session) {
  for(i in 1:3){
    Sys.sleep(1.5)
    insertUI(
      selector = "#add",
      where = "afterEnd",
      ui = div(style = paste0("width: 75px; height: 75px; background-color: white;"), h5("Text appears live", align = "center"), 
               div(h6("Text inside a div appears live")),
               div(id = "img", img(src = "image.jpg", alt = "Images do not appear live")
               )
      ),
      immediate = TRUE
    )
  }
}
shinyApp(ui, server)

Is this normal behavior for shiny? If so is their a way to bypass it and to see the images appear directly? Another way to do it?

Lewis Carter
  • 81
  • 5
  • Your script is working fine. Are you running the app in the browser or in RStudio? Try to run it external in chrome or firefox. – José Luiz Ferreira Jul 05 '19 at 20:44
  • I already tried running it in RStudio and Chrome and it still does not work but after your suggestion I tried Firefox and the images appear fine at the same time as the text... This is a bit strange didn't you have any problem in RStudio? – Lewis Carter Jul 05 '19 at 22:20
  • Actually it does not even work in Firefox the alt text gets printed live along with the text but when I attach real images they only appear after the loop is finished just like Chrome and RStudio – Lewis Carter Jul 05 '19 at 22:43
  • Might this be a problem solved by hitting the "Run App" button in Rstudio? – dca Nov 10 '22 at 19:02

1 Answers1

0

Here's a slightly more self-contained set of code that works for me if I run the app by hitting the "Run App" button in Rstudio.

dir.create("www")
dir.create("www/images")
library(shiny)
library(magick)

green.square <- image_blank(width=50, height =75, color= "green")
grid.total.squares <- 12*8
wordList <- 1:(grid.total.squares*2)
for (i in seq_along(wordList)){
  thisImage = image_annotate(green.square, gravity="center", i,
                             size=30)
  image_write(thisImage, format = "png", path = paste0("www/images/",i, ".png"))
}

ui <- fluidPage(
  actionButton("add","Add something"),
)
server <- function(input, output, session) {
  for(i in 1:3){
    Sys.sleep(.5)
    insertUI(
      selector = "#add",
      where = "afterEnd",
      ui = div(style = paste0("min-width:75px; min-height: 75px; background-color: white;  clear:both;"), h5("Text appears live", align = "center"),
               div(h6("Text inside a div appears live")),
               div(id = "img",
                   img(src = paste0("images/",i,".png"),
                       alt = "Images do not appear live"
                      ),
                   hr()
               )
      ),
      immediate = TRUE
    )
  }
}
shinyApp(ui, server)
dca
  • 594
  • 4
  • 18