CODEWITHSUNDEEP
rshinyrstudio
kgui
kgui

Reputation: 4165

imageOutput Shiny, limited to one image (the last one)

I am placing several images into a Shiny app using the imageOutput function as follows, but only the last image is shown. Is this because imageOutput is limited to only one image?

# ui.R
library(shiny)
library(png)
library(DT)

shinyUI(navbarPage(
  title = " Nanoproject",

  # first panel , create table of the peaksTable dataframe 
  tabPanel('Peak Table' , 
           dataTableOutput("table1")),

  # second panel
  tabPanel('Peak Images' , 
           imageOutput("image1",width=100,height=100),
           imageOutput("image2",width=100,height=100),
           imageOutput("image3",width=100,height=100),
           imageOutput("image4",width=100,height=100),
           imageOutput("image5",width=100,height=100),
           imageOutput("image6",width=100,height=100),
           imageOutput("image7",width=100,height=100),
           imageOutput("image8",width=100,height=100),
           imageOutput("image9",width=100,height=100),
           imageOutput("image10",width=100,height=100),
           imageOutput("image11",width=100,height=100)
  ),

  # third panel

  tabPanel('Event Table' , dataTableOutput("table3")),

  # fourth panel
  tabPanel('Event Images')
))

#server.R
# the peak images, 1-12   
output$image1 <- renderImage({list(src=paste0(imagePath,"/peak1.png"))},deleteFile=FALSE)
output$image2 <- renderImage({list(src=paste0(imagePath,"/peak2.png"))},deleteFile=FALSE)
output$image3 <- renderImage({list(src=paste0(imagePath,"/peak3.png"))},deleteFile=FALSE)
output$image4 <- renderImage({list(src=paste0(imagePath,"/peak4.png"))},deleteFile=FALSE)
output$image5 <- renderImage({list(src=paste0(imagePath,"/peak5.png"))},deleteFile=FALSE)
output$image6 <- renderImage({list(src=paste0(imagePath,"/peak6.png"))},deleteFile=FALSE)
output$image7 <- renderImage({list(src=paste0(imagePath,"/peak7.png"))},deleteFile=FALSE)
output$image8 <- renderImage({list(src=paste0(imagePath,"/peak8.png"))},deleteFile=FALSE)
output$image9 <- renderImage({list(src=paste0(imagePath,"/peak9.png"))},deleteFile=FALSE)
output$image10 <- renderImage({list(src=paste0(imagePath,"/peak10.png"))},deleteFile=FALSE)
output$image11 <- renderImage({list(src=paste0(imagePath,"/peak11.png"))},deleteFile=FALSE)

but, only the LAST image is loaded

Upvotes: 1

Views: 1204

Answers (2)

kgui
kgui

Reputation: 4165

The height and width were set to "auto," which fixed the problem. Kudos to user3949008 for helping me realize that the height and width needed to be changed.

Upvotes: 0

Gopala
Gopala

Reputation: 10473

What is the actual size of the image file(s)?

I tried the following code (filename1, filename2, filename3 are just some local path names of image files), and it works fine in the case where the image sizes are smaller AND DOES NOT WORK (renders overlapping way) when the image sizes are very large. It looks like only the last image is rendered, but reality is all others are hidden underneath.

library(shiny)

ui <- fluidPage('Peak Images',
               imageOutput("image1"),
               imageOutput("image2"),
               imageOutput("image3"))

server <- function(input, output) {
  output$image1 <- renderImage({
    list(src = filename1)
  }, deleteFile = FALSE)
  output$image2 <- renderImage({
    list(src = filename2)
  }, deleteFile = FALSE)
  output$image3 <- renderImage({
    list(src = filename3)
  }, deleteFile = FALSE)
}

shinyApp(ui = ui, server = server)

Upvotes: 2

Related Questions