Drthm1456
Drthm1456

Reputation: 479

Load Shinydashboard Image

I am trying to load an image into my shinydashboard and I am getting a blue question mark in the center of the image when the image renders. I created a www folder in my working directory and have placed the png in that folder.

My layout for this tab so far is just:

tabItem(tabName = "Alignment",
  fluidRow(
    tags$img(src = 'Alignment.png', height = 800, width = 1200)
)
),

The tab name shows up in my shinydashboard and it tries to load the image and will size it if I change it but it doesn't load anything.

Any suggestions on to what this why this would be?

Upvotes: 1

Views: 4210

Answers (2)

user12057563
user12057563

Reputation: 11

I tried the answer above. It worked. I just had to tweak it a bit because I believe in the imageOutput() command the argument should be imageOutput("picture", height = "auto") instead of imageOutput("Alignment", height = "auto").

Upvotes: 1

Kevin
Kevin

Reputation: 2044

You need to put the picture on the server side to render it.

Try this:

library (shiny)
library (shinydashboard)
library (png)


###/UI SIDE/###

header <- dashboardHeader()
sidebar <- dashboardSidebar(
  sidebarMenu(id = "test",
              menuItem("Alignment", tabname = "AlignmentTab")
  )
)
body <- dashboardBody(
  tabItem(tabName = "AlignmentTab",
          fluidRow(
            box(
              title = "Alignment", status = "primary", solidHeader = TRUE, width = 12,
              imageOutput("Alignment", height = "auto")
            )
          )
  )
)

ui <- dashboardPage(header, sidebar, body)

###/SERVER SIDE/###
server <- function(input, output, session) {

  output$picture <- renderImage({
      return(list(src = "/srv/samba/share/site layouts//Alignment.PNG",contentType = "image/png",alt = "Alignment"))
  }, deleteFile = FALSE) #where the src is wherever you have the picture

}

#Combines Dasboard and Data together----
shinyApp(ui, server)

Upvotes: 1

Related Questions