rshinyshiny-server

How to embed an image in a cell a table using DT, R and Shiny


How can I embed an image in a cell that is generated using the DT package so that it is displayed in an app using shiny?

My example is based of this question R shiny: How do I put local images in shiny tables

The example code below doesn't display the image, but rather just the url.

# ui.R
require(shiny)
library(DT)

shinyUI(
  DT::dataTableOutput('mytable')
)

# Server.R
library(shiny)
library(DT)


dat <- data.frame(
  country = c('USA', 'China'),
  flag = c('<img src="test.png" height="52"></img>',
           '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/200px-Flag_of_the_People%27s_Republic_of_China.svg.png" height="52"></img>'
           )
)

shinyServer(function(input, output){
  output$mytable <- DT::renderDataTable({

    DT::datatable(dat)
  })
})

Solution

  • You can use the escape = FALSE in your DT call, as per: https://rstudio.github.io/DT/#escaping-table-content

    # ui.R
    require(shiny)
    library(DT)
    
    shinyUI(
      DT::dataTableOutput('mytable')
    )
    
    # Server.R
    library(shiny)
    library(DT)
    
    
    dat <- data.frame(
      country = c('USA', 'China'),
      flag = c('<img src="test.png" height="52"></img>',
               '<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/200px-Flag_of_the_People%27s_Republic_of_China.svg.png" height="52"></img>'
               )
    )
    
    shinyServer(function(input, output){
      output$mytable <- DT::renderDataTable({
    
        DT::datatable(dat, escape = FALSE) # HERE
      })
    })
    

    Images working with DT