CODEWITHSUNDEEP
rdatatablesshinydt
string
string

Reputation: 827

Display Image in a Data Table from a local path in R Shiny

I am trying to display the Image in a Data Table from a local path. Please note the local path is different from www folder and in real scenario, I can not move the images from the prescribed path to www folder. Strange thing is that it is working from www location and but not from the prescribed path. Looking for any tips to resolve this.

Here is the code:

library(shiny)
library(shinyBS)
library(DT)

flag <- data.frame(image=c('<img src="C:/Users/string/100x100/100x100_bigimg.jpg"></img>'))

ui <- shinyUI(pageWithSidebar(
headerPanel("renderImage example"),
sidebarPanel(
actionButton("go","Go")
),
mainPanel(
bsModal("modalExample", "Image", "go", size =    "large",imageOutput("myImage")),

DT::dataTableOutput("dt")

)
))

server <- shinyServer(function(input, output, session) {

output$dt <- DT::renderDataTable({
DT::datatable(flag,escape = FALSE )
})

observeEvent(input$go,{
output$myImage <- renderImage({
# Return a list containing the filename
return(list(src = "C:/Users/string/100x100/100x100_bigimg.jpg",
     contentType = 'image/png',
     width = 550,
     height = 400,
     alt = "This is alternate text"))
}, deleteFile = FALSE)

})

})

shinyApp(ui,server)

Also, from prescribed path renderImage part is working perfectly but in data table part image is not getting displayed.

Upvotes: 2

Views: 2191

Answers (1)

string
string

Reputation: 827

This can be achieved using addResourcePath - Applicable to Windows as well as Shiny web Server.It adds directory of static resource. https://shiny.rstudio.com/reference/shiny/latest/addResourcePath.html

Here is the working example:

ui.R

library(shiny)
library(shinydashboard)
library(shinyBS)
library(DT)

dashboardPage(
dashboardHeader(title = span(tagList(icon("image"), "Example"))),
dashboardSidebar(),
dashboardBody(

div(style="display:inline-block",uiOutput("infoButton")),

DT::dataTableOutput("table2")

 )
)

Server.R

addResourcePath("Images","D/HDImages") # Images are located outside shiny App

LeafNames <- c('Leaf1.jpg','Leaf2.jpg','Leaf3.jpg','Leaf4.jpg','Leaf5.jpg','Leaf6.jpg','Leaf7.jpg','Leaf8.jpg','Leaf9.jpg','Leaf10.jpg')
LeafTable <- data.frame(LeafNames)
LeafTable<- within(LeafTable, thumbnail <- paste0("<img 
src='","Images/",LeafTable$LeafNames,"' height='50'></img>"))

function(input, output) { 

output$table2<-DT::renderDataTable({

responseDataFilter2 <- LeafTable[,c(2,1)]

displayableData<-DT::datatable(data = as.data.frame(responseDataFilter2, stringAsFactors = FALSE, row.names = NULL),

                               escape=FALSE,selection="single",rownames=FALSE,colnames=c(" ","Name"),

                               callback = JS("table.on('dblclick.dt', 'td', function() {
                                             var row=table.cell(this).index().row;
                                             Shiny.onInputChange('rows_home',[row, Math.random()])});
                                             table.on('click.dt', 'td', function() {
                                             var k=table.cell(this).index().row;
                                             if(table.rows('.selected').indexes().toArray()!= '' && table.rows('.selected').indexes().toArray() == k){k=-1;}
                                             Shiny.onInputChange('rows_up_home',[k, Math.random()]);
                                             Shiny.onInputChange('row_path', table.rows(this).data().toArray());
                                             });"),

                               options = list(

                                 paging=FALSE,searching = FALSE,ordering=FALSE,scrollY = 750,scrollCollapse=TRUE,server = TRUE

                               ))

})

output$infoButton = renderUI({
s = input$table2_rows_selected # Row number of selected row 
if (length(s)!= 0) {
  tagList(
    actionButton("info", "",icon("info-circle"),style="color:rgb(57,156,8);border-color:rgb(255,255,255)"),

    # Information Dialog Box
    bsModal("ObjectInfo", LeafTable[s,c(1)], "info", size = "large", # Enables Pop up Screen

            img(src= paste0("Images/",LeafTable[s,c(1)]),width='800',height='600')

    )
  )

}
})

}

Upvotes: 1

Related Questions