CODEWITHSUNDEEP
rimageshinyheadershinydashboard
Nandro Keiko
Nandro Keiko

Reputation: 33

How to place an image above the header using shinydashboard

I want to put an image on top of the header of my shiny app using just like shown below but I don't know how to approach this issue.

Example

Here is the basic dashboard structure:

library(shiny)
library(shinydashboard)

ui <-  dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

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

shinyApp(ui, server)

Upvotes: 1

Views: 712

Answers (1)

ismirsehregal
ismirsehregal

Reputation: 33417

We can simply wrap the dashboardPage in a body tag and include the image:

library(shiny)
library(shinydashboard)

ui <- tags$body(
  tags$img(src = "https://i.sstatic.net/IqerJ.png", width = '100%'),
  dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody()
  )
)

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

shinyApp(ui, server)

result

Relevant info: https://github.com/rstudio/shiny/pull/660

Here is another way to realize this: https://jonkatz2.github.io/2018/06/22/Image-In-Shinydashboard-Header

PS: you might want to save that image in your local www folder instead of using imgur.com as the src.

Upvotes: 1

Related Questions