Displaying images in a table

[Andrew Clark]

If I have a data.frame , df, with two columns name and country

df$name[1] "Snowden  df$country[1] "Ecuador" etc

I want to display all the names with a flag of the associated country

which I have in an  /images folder e.g Ecuador.png

What is the function in server.R that I need to do this, with the associated code in ui.R

thanks in advance

andrew clark

[Mike C]

Well, luckily the datasets already shows images in a googleVis pageable example (and likely elsewhere, this is just where I most recently recalled it from):

library(datasets)
library(googleVis)
library(shiny)
Population[1:3,]

it uses an <img src="http://upload.wikimedia.org/TheNSAisReadingThisMessage/MyFourthAmendmentIsBeingTrampledOn/flag1.png"> as the element within the 'Flag' column. 

So basically just using the address of your shiny http://glimmer.blahblah/app/folderOfYourFlags/flag1.png in the df should suffice, right?  Alternatively, you can use an external image host like imgur (or the existing flags on wikimedia?) and link to those.

[Andrew Clark]

Thanks Mike

  Not quite sure about this

output$test <- renderTable({

      Population[1,c(2,5)]

    })

produces

Country	Flag
1	China	< img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/22px-Flag_of_the_People%27s_Republic_of_China.svg.png">

[Mike C]

Well, a firefox crash ate my long winded response.  The concise one is-
It may be that it only works with googleVis' table function- which is very easy to transition to and is cooler anyway:
check out example 2 http://lamages.blogspot.com/2013/02/first-steps-of-using-googlevis-on-shiny.html

[Andrew Clark]

Thanks for taking time out. I understand what you are getting at

Yep gvis works differently and does show the image

I have used it a few times and having the tables sortable and pagable is great. However, I do not need these

options for this app and google tables are, I believe, quite a lot more difficult to customize re changing column width and possiby removing headers

[Ramnath Vaidyanathan]

Andrew,

The trouble is that renderTable uses xtable which by default sanitizes the output, like escaping HTML.

Here is an Rmd file that shows how you can prevent this. The key is to specify a sanitize.text.function that does not escape anything. You can tweak it so that only the flags column is not escaped. Shiny does allow you to pass options to xtable in renderTable. So you should be able to use this idea to display your flags as images.

Hope this helps.

Cheers,
Ramnath

## Test

```{r results = 'asis', comment = NA}

require(xtable)

options(xtable.type = 'html')

dat <- data.frame(

 country = c('USA', 'China'),

 flag = c('<img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png"></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"></img>')

)

print(xtable(dat), sanitize.text.function = function(x) x)

```

[Ramnath Vaidyanathan]

Here is a gist with a Shiny app that uses this idea.

https://gist.github.com/ramnathv/f476dd3751e672a96801

[Andrew Clark]

Thanks Ramnath

  Looks to be working a treat

Andrew

[Sam Higgins]

Thanks for that solution Ramnath.
So, I'm encountering another problem, I can't seem to get shiny to display an image in the table which stored on my machine. The flag images, specified by URL, work fine, but nothing displays when I give the file name of an image place in the shiny app's home directory. I have checked the HTML and it appears to be just the same as that in HTML docs which succeed at displaying images stored on the local machine.

My server.R script I am using is pasted below (the ui.R script is exactly the same as used in your example). The script does check and display what the working directory of the program is. I have also tried giving it an absolute file path, to no avail.

Does anyone know a way to display a locally hosted image in a table generated by shiny? Can anyone suggest any other sort of work-around?

Thank you for you help.

#server.R
require(shiny)
shinyServer(function(input, output){
    output$mytable <- renderTable({
        dat <- data.frame(
            country = c('USA', 'China','Working directory'),
            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>',
                             getwd())
        )
        dat
    }, sanitize.text.function = function(x) x)
})