Search code examples
rshinyshinydashboard

shinydashboard, logo locally from folder

I have a newly occured problem, if the logo that I want to be displayed on the dashboard is in the folder (working directory is correctly set) it is not shown anymore, I tried all possible combinations (I put the logo.jpg in the www, I put it directly in the same folder as the "app.R", wrote tags$img(src = 'www/logo.jpg') and one without the www/

library(shiny)
library(shinydashboard)

ui <- function(){

dashboardPage(
dashboardHeader(
title = "Demo",
tags$li(class = "dropdown",
        tags$a(href = 'https://google.com',
               tags$img(src = 'logo.jpg', height= 50,width= 50, align = "right")
        )
 ),
  dropdownMenuOutput('messageMenu')
 ),
 dashboardSidebar( sidebarMenu(id="side", menuItem("Option1", tabName="op1"),

                            menuItem("Option2", tabName="op2"), 
menuItem("Option3", tabName="op3"))
),


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

shinyApp(ui, server)

however adding the logo as an external link works perfectly, e.g.

tags$img(src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', height= 50,width= 50, align = "right")

(up until few weeks having the logo saved in the local folder www/ also displayed it when I started the app locally) was there any change recently in shinydashboard, or does anyone know a workaround for this?

Solution

  • The prefix for the www folder is "/". Please see the details section here.

    A working example:

    imgName = "logo.png"

if(!dir.exists("www")){
  dir.create("www")
}

png(file = paste0("www/", imgName), bg = "lightgreen")
par(mar = c(0,0,0,0))
plot(c(0, 1), c(0, 1), ann = F, bty = 'n', type = 'n', xaxt = 'n', yaxt = 'n')
text(x = 0.5, y = 0.5, imgName, cex = 10, col = "black")
dev.off()

library(shiny)
library(shinydashboard)

ui <- function() {
  dashboardPage(
    dashboardHeader(
      title = "Demo",
      tags$li(class = "dropdown",
              tags$a(
                href = 'https://google.com',
                tags$img(
                  src = '/logo.png',
                  height = "50px",
                  width = "50px"
                ),
                style = "padding: 0;"
              ))
    ),
    dashboardSidebar(sidebarMenu(
      id = "side",
      menuItem("Option1", tabName = "op1"),
      menuItem("Option2", tabName = "op2"),
      menuItem("Option3", tabName = "op3")
    )),
    body = dashboardBody()
  )
}

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

shinyApp(ui, server)

    As an alternative you can use addResourcePath to make any other folders available to the webserver:

    imgName = "logo.png"

if(!dir.exists("images")){
  dir.create("images")
}

addResourcePath(prefix = "img", directoryPath = "images")

png(file = paste0("images/", imgName), bg = "lightgreen")
par(mar = c(0,0,0,0))
plot(c(0, 1), c(0, 1), ann = F, bty = 'n', type = 'n', xaxt = 'n', yaxt = 'n')
text(x = 0.5, y = 0.5, imgName, cex = 10, col = "black")
dev.off()

library(shiny)
library(shinydashboard)

ui <- function() {
  dashboardPage(
    dashboardHeader(
      title = "Demo",
      tags$li(class = "dropdown",
              tags$a(
                href = 'https://google.com',
                tags$img(
                  src = 'img/logo.png',
                  height = "50px",
                  width = "50px"
                ),
                style = "padding: 0;"
              ))
    ),
    dashboardSidebar(sidebarMenu(
      id = "side",
      menuItem("Option1", tabName = "op1"),
      menuItem("Option2", tabName = "op2"),
      menuItem("Option3", tabName = "op3")
    )),
    body = dashboardBody()
  )
}

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

shinyApp(ui, server)

    PS: the same can be done with jpeg() or better svg images.