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

Question

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)
  })
})

score 35 · Accepted Answer · answered Jun 08 '15 at 01:42

35

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

answered Jun 08 '15 at 01:42

Brandon Bertelsen

42,225
33
153
250

At this point in time, it is not working for me. Could that be because of some change in the package? – Fisseha Berhane Jul 20 '17 at 04:01
@FissehaBerhane Recommend you open a new question with MWE (minimum working example) – Brandon Bertelsen Jul 21 '17 at 12:24
this answer could help for images on the server https://stackoverflow.com/questions/47804593/adding-an-image-to-a-datatable-in-r – Roman Oct 31 '18 at 11:55

Stanislav · Answer 2 · 2021-10-25T09:43:19.853

1

Minor update from 2021:

require(shiny)
library(DT)

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

dat <- data.frame(
  country = c('China'),
  flag = c('<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>'
  )
)

#now this is a function
shinyServer <- function(input, output){
  output$mytable <- DT::renderDataTable({
    
    DT::datatable(dat, escape = FALSE) # HERE
  })
}

#minor change to make it runnable
shinyApp(shinyUI, shinyServer)

edited Oct 25 '21 at 09:43

answered May 16 '21 at 08:40

Stanislav

503
6
19

Can you please [edit] your answer to explain what you've changed and why? That will make this a lot more useful to future viewers. – Cody Gray Jun 06 '21 at 12:07

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

2 Answers2

Linked