Embedding Image in Shiny App

Embedding Image in Shiny App

I found another option that looks good for this app, so I'm sharing for others who want the image in the mainPanel.

mainPanel(
   img(src='myImage.png', align = "right"),
  ### the rest of your code
  )

Save the file in a www directory in the shinyApp directory:

 | shinyApp/
    | ui.R
    | server.R
    | www/
       | myImage.png

Display locally-stored image in R Shiny

For me the following also works when running the app via Run Selected Line(s) in RStudio:

library(shiny)

# create some local images
if(!dir.exists("myimages")){
  dir.create("myimages")
}

myPlotPaths <- paste0("myimages/myplot", seq_len(3), ".png")

for (myPlot in myPlotPaths) {
  png(file = myPlot, bg = "transparent")
  plot(runif(10))
  dev.off() 
}

myImgResources <- paste0("imgResources/myplot", seq_len(3), ".png")

# Add directory of static resources to Shiny's web server
addResourcePath(prefix = "imgResources", directoryPath = "myimages")

ui <- fluidPage(
  tags$img(src = myImgResources[1], width = "400px", height = "400px"),
  tags$img(src = myImgResources[2], width = "400px", height = "400px"),
  tags$img(src = myImgResources[3], width = "400px", height = "400px")
)

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

shinyApp(ui, server)

Rendering images in documents and embedded shiny apps

I think it can be done a lot easier. For me the problem was defining the right path for the image. No need to use renderImage! Scaling the image resolves the scrolling and using img allows you to define the position (alignment):

---
title: "Documentation"
author: "tueftla"
date: "23 Mai 2017"
output: html_document
runtime: shiny
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(shiny)
```

Here is my documentation …  
and also one of the images.  


```{r, echo = FALSE}

fluidPage(

titlePanel("Tabsets"),

img(src='www/logotitle.jpg', align = "right",width=100,height=100),
# make sure you define the right (full) path

sidebarLayout(
  sidebarPanel(
    radioButtons("dist", "Distribution type:",
                 c("Normal" = "norm",
                   "Uniform" = "unif",
                   "Log-normal" = "lnorm",
                   "Exponential" = "exp")),
    br(),

    sliderInput("n", 
                "Number of observations:", 
                 value = 500,
                 min = 1, 
                 max = 1000)
  ),


  mainPanel(
    tabsetPanel(type = "tabs", 
      tabPanel("Plot", plotOutput("plot")), 
      tabPanel("Summary", verbatimTextOutput("summary")), 
      tabPanel("Table", tableOutput("table"))
    )
  )
))

data <- reactive({
    dist <- switch(input$dist,
                   norm = rnorm,
                   unif = runif,
                   lnorm = rlnorm,
                   exp = rexp,
                   rnorm)

    dist(input$n)
  })

  # Generate a plot of the data. Also uses the inputs to build
  # the plot label. Note that the dependencies on both the inputs
  # and the data reactive expression are both tracked, and
  # all expressions are called in the sequence implied by the
  # dependency graph
  output$plot <- renderPlot({
    dist <- input$dist
    n <- input$n

    hist(data(), 
         main=paste('r', dist, '(', n, ')', sep=''))
  })

  # Generate a summary of the data
  output$summary <- renderPrint({
    summary(data())
  })

  # Generate an HTML table view of the data
  output$table <- renderTable({
    data.frame(x=data())
  })
```

You can remove the renderImage part and all the ui/server functions (as stated earlier), simply keeping the render functions and tabsets. My result:

Having Trouble with Image Output in R Shiny

create a new directory named www in your code directory and put your image there, and then reference the new image path.

Embedding an image with shinymanager R

If the image is available in the www folder using addResourcePath is unnecessary. The prefix for the www folder is "/". Please see this.

Accordingly the following should be sufficent:

tags$img(
          src = "/pabackground.png", width = 100
        )

How to embed picture from dropbox in shiny

I appears this is a known issue with dropbox that they don't allow iframes. There is a new functionality called the embedder which supposedly does this, but it's rather complicated. See discussion here: https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/Embed-dropbox-folder-in-the-a-webpage/td-p/72455
Perhaps my ultimate solution will be to switch and use google drive or something, but I would miss the functionality of the rdrop2 package.

---

Related Topics