Image

#| standalone: true
#| components: [viewer]
#| viewerHeight: 200

library(shiny)
library(bslib)

ui <- page_fluid(
  imageOutput("image") 
)

server <- function(input, output) {
  output$image <- renderImage( 
    { 
      list(src = "shiny.png", width = "100px") 
    }, 
    deleteFile = FALSE 
  ) 
}

shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_fluid(
  imageOutput("image") 
)

server <- function(input, output) {
  output$image <- renderImage( 
    { 
      list(src = "shiny.png", height = "25%") 
    }, 
    deleteFile = FALSE 
  ) 
}

shinyApp(ui = ui, server = server)
No matching items

Relevant Functions

  • imageOutput
    imageOutput(outputId, width = "100%", height = "400px", click = NULL, dblclick = NULL, hover = NULL, brush = NULL, inline = FALSE, fill = FALSE)

  • renderImage
    renderImage(expr, env = parent.frame(), quoted = FALSE, deleteFile, outputArgs = list())

No matching items

Details

To make a reactive image, follow three steps:

  1. Call imageOutput() in the UI of your app to create a div in which to display the image. Where you call this function within the UI functions will determine where the image will appear within the layout of the app. Set the outputId argument of imageOutput() to a unique value.

  2. Optionally, set inline = TRUE to place the image inline with the text or elements that precede it or use fill = TRUE to allow the image to grow or shrink to fill its container as the app is resized.

  3. Within the server function, call renderImage() and save its output as an element of the output list. Name the element after the outputId used above. For example, output$image <- renderImage(). imageOutput() will display the value of the output element whose name matches its outputId.

  4. Pass renderImage() a block of code, surrounded with {}. The code should return a list containing at least one entry, src, providing the path to the image file. You can also add other elements such as width, height, class, and alt to the list, and they will be used as attributes for the rendered image.

  5. Set the deleteFile argument of renderImage() to TRUE if you want the file deleted after it is sent to the client browser, and FALSE otherwise. Typically, you’ll want to use deleteFile = TRUE if the image is a temp file generated within renderImage(), and deleteFile = FALSE otherwise.