19

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

2 Answers 2

Reset to default

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

35
+50

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

3
  • 1
    At this point in time, it is not working for me. Could that be because of some change in the package? Jul 20, 2017 at 4:01
  • @FissehaBerhane Recommend you open a new question with MWE (minimum working example) Jul 21, 2017 at 12:24
  • this answer could help for images on the server stackoverflow.com/questions/47804593/…
    – Roman
    Oct 31, 2018 at 11:55
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)
1
  • 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 6, 2021 at 12:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.