Rendering images in DT table in R Shiny

Question

I'm making an R Shiny webpage that uses a DT table with many columns, the first of which is an image. Currently, I've found two different ways to get these images to show up and want to know if there are any others as neither is fitting my needs.

METHOD 1 - Point to an existing web hosted iamge

The first, is to have a column in the dataframe used to build to the table that follows this format:

<img src='URL_TO_IMG.png' height='200'></img>

where URL_TO_IMG.png links to a pre-existing, already hosted, web image.

METHOD 2 - encode image file to a data URI

The other is to use download the images locally and instead use the following:

<img src='RESULTS_OF_KNITR_IMAGE_URI' height='200'></img>

Where RESULTS_OF_KNITR_IMAGE_URI are the results of the knitr::image_uri(x) function call where x is the path to my local image. From the knitr documentation this function:

...can encode an image file as a base64 string, which can be used in the img tag in HTML.

Findings:

METHOD 1 works great, but has the problem were I want to post process the web hosted images to be a smaller size. Sometimes they'll be very large and take a long time to load when I really only need a 200 pixel width image, at most. Also, I'd like to have more control over the location of the image files.

METHOD 2's data URI approach allows me to locally pre-process the images to fit nicely into the columns and be smaller. However, since I have 200+ images, this causes the application to have a 10+ second load time as I believe the app loads ALL the images at once this way.

I'm thinking I may want to host my post processed images on an image hosting site and point to the URL like METHOD 1 but am unsure. Any recommendations?

If anyone wants to play with my setup, I made a minimum working example:

library(shiny)
library(DT)

# read in CSV with table information
my_image_df = read.csv('image_test_case_table.csv')

# Define UI
ui <- fluidPage(
  fluidRow(
    DTOutput("my_table", width = "100%")
  )
)

# Define server
server <- function(input, output) {
  output$my_table = DT::renderDataTable(
    DT::datatable(
      {data <- my_image_df},
      escape = FALSE,
      rownames = FALSE,
      options = list(columnDefs = list(list(className = 'dt-center', targets = 0))),
      selection = 'single'
    )#datatable
  )#renderDataTable
}

# Run the application
shinyApp(ui = ui, server = server)

Any ideas?

Answer 1

A little hidden in the Shiny documentation, you will find METHOD 3 that involves supplying the image files inside a www directory (example reference here or in the cheatsheet).

If your folder structure looks as follows

├── image_test_case.R
├── image_test_case_table.csv
├── www/
│   ├── amerikaan.jpg
│   └── tilia.jpg

then you may set the src tag to the image path relative to the www path.

<img src='amerikaan.jpg' height='200'></img>
<img src='tilia.jpg' height='200'></img>

Note that www is used for all sorts of static resources (most common images, javascript and css files).