How to source a locally stored image for embedding into a table cell in R Shiny?

Question

The below code does a terrific job of rendering a web-sourced image in a cell of the rhandsontable. However, I'd like swap that image with a jpg image I have stored on my computer. I've tried modifying the below as.character(img(src = "...")) to reflect the local directory and filename, with no luck.

Any suggestions for a straightforward way to do this?

I searched for solutions, for example, Display locally-stored image in R Shiny, but they look rather involved given what I thought is the simplicity of what I'm trying to do. Certainly accessing your local drive is easier than reaching out to the Web via API.

Here's the painfully simple image I want to upload (shrunken of course):

Code:

library(magrittr)
library(htmlwidgets)
library(rhandsontable)
library(shiny)

DF = data.frame(
  Col_1 = c("Row 1"), 
  Col_Help = c(
    as.character(img(
      src = "https://images.plot.ly/language-icons/api-home/python-logo.png", 
      title = "My first help text", 
      style = "width: 50px;")
      )
  ),
  text = c("Row 1 does xxx"),
  stringsAsFactors = FALSE
)

ui <- fluidPage(br(),rHandsontableOutput('my_table'))

server <- function(input, output, session) {
  output$my_table <- renderRHandsontable({
    rhandsontable::rhandsontable(
      DF,
      allowedTags = "<em><b><strong><a><big><img>"
    ) %>%
      hot_cols(colWidths = c(200, 80)) %>%
      hot_col(1:2, renderer = htmlwidgets::JS("safeHtmlRenderer")) %>%
      hot_cols(colWidths = ifelse(names(DF) != "text", 100, 0.1))
  })
}

shinyApp(ui, server)

score 1 · Accepted Answer · answered Oct 18 '22 at 16:29

1

Put your file, say question_mark.jpg in the www folder of your shiny app, and then adjust your DF definition as below:

DF = data.frame(
  Col_1 = c("Row 1"), 
  Col_Help = c(
    as.character(img(
      src = "question_mark.jpg", 
      title = "My first help text", 
      style = "width: 50px;")
      )
  ),
  text = c("Row 1 does xxx"),
  stringsAsFactors = FALSE
)

Output:

answered Oct 18 '22 at 16:29

langtang

22,248
1
12
27

Hi langtang, how do I find my www folder? – Village.Idyot Oct 18 '22 at 16:52
1

@Village.Idyot you'll [need to create it](https://shiny.rstudio.com/reference/shiny/1.4.0/resourcePaths.html). Please check my answer [here](https://stackoverflow.com/questions/68933400/render-image-in-ui-created-by-r-shiny/68934057#68934057) – ismirsehregal Oct 18 '22 at 17:40
I tried that. I created a www subfolder, containing the image, in the directory where I have the App saved. Still doesn't work. That folder where I have the App saved has many other Apps, for my Stack Overflow questions. Does each App need its own folder? I must be doing something very basic very wrong. – Village.Idyot Oct 18 '22 at 17:48
1

Yes, usually each app has its own folder containing e.g. an app.R file and a www folder if needed. You can use RStudio's file dialog to create a new app and maybe a corresponding RStudio project. – ismirsehregal Oct 18 '22 at 18:04
Actually I solved something by doing a bit more research!! FINALLY! This link, https://stackoverflow.com/questions/70162920/how-do-you-use-addresourcepath-in-r-shiny, explains how to use addResourcePath() to map images on a local directory, and it worked! It has a very detailed explanation and I just followed it step-by-step – Village.Idyot Oct 18 '22 at 18:07

How to source a locally stored image for embedding into a table cell in R Shiny?

1 Answers1