side by side images in R-shiny

Question

I have 11 images. I want to show them in different tabs. one of the images needs to be next to each of the other 10 images. How can I do that in R-Shiny?

Doing the following has two problems:

It seems one image cannot be shown more than once, in this case repeated_image which is rendered via renderImage() in the server.R.
If I read the need-to-be-repeated image 10 different times with 10 different names, then the other problem is that the following code will place them on top of each other, as opposed to next to each other:

tabPanel("Some title here", fluidRow(tabBox(tabPanel("Tab 1", imageOutput("image_1"), br(),br(),br(),br(), imageOutput("repeated_image"), height = 700), tabPanel("Tab 2", imageOutput("image_2"), br(), br(), imageOutput("repeated_image"), height=700), width = 12 ) ) )

Any suggestion? Can I do this in server during rendering images? something like

renderImage(image_1, repeated_image)
renderImage(image_2, repeated_image)

for the second question, why don't you just create two ```plotOutput``` per tab and then put on image in each? — bretauv, Nov 19 '19 at 20:43
because I do not want to generate plots on the fly (perhaps that will slow down the website). I want to pre-generate plots/images and then just use them. — OverFlow Police, Nov 19 '19 at 21:21

Subhasish1315 · Accepted Answer · 2019-11-21T04:24:03.093

I tried the same in very static way where all imageOutput are written separately.

Two ways to put images side by side- TabBox and Column Based.

For Column based I have taken a small picture.128*128 For TabBox you can choose any size picture. Both case you can use width and height parameter to change as per your requirement. Please let me know if that solves your problem. ui.R

library(shiny)
library(shinydashboard)

dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
   fluidRow(
     column(1,imageOutput("img1")),
     column(1,imageOutput("img2")),
     column(1,imageOutput("img3")),
     column(1,imageOutput("img4")),
     column(1,imageOutput("img5")),
     column(1,imageOutput("img6")),
     column(1,imageOutput("img7")),
     column(1,imageOutput("img8")),
     column(1,imageOutput("img9")),
     column(1,imageOutput("img10")),
     column(1,imageOutput("img11"))
   ),
   fluidRow(
            tabBox(
              tabPanel("Tab 1",
                   fluidRow(
                      column(6,
                             imageOutput("tabimg1_1")
                             ),
                      column(6,
                             imageOutput("tabimg1_2")
                             )
                   )
                   ),
              tabPanel("Tab 2",imageOutput("tabimg2")),
              tabPanel("Tab 3",imageOutput("tabimg3")),
              tabPanel("Tab 4",imageOutput("tabimg4")),
              tabPanel("Tab 5",imageOutput("tabimg5")),
              tabPanel("Tab 6",imageOutput("tabimg6")),
              tabPanel("Tab 7",imageOutput("tabimg7")),
              tabPanel("Tab 8",imageOutput("tabimg8")),
              tabPanel("Tab 9",imageOutput("tabimg9")),
              tabPanel("Tab 10",imageOutput("tabimg10")),
              tabPanel("Tab 11",imageOutput("tabimg11"))
            )
   )
  )
)

Server.R

    library(shiny)
    library(shinydashboard)


    shinyServer(function(input,output){

    filename <- normalizePath(file.path('./www/images','rstudio.png'))
    tabfilename<-normalizePath(file.path('./www/images','studio logo.jpg'))

    output$img1<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img2<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)


    output$img3<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img4<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img5<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img6<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$img7<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$img8<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$img9<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$img10<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$img11<-renderImage({
      list(src = filename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)


    output$tabimg1_1<-renderImage({
  list(src = tabfilename,
       contentType = 'image/png',
       alt = "This is alternate text")
}, deleteFile = FALSE)

output$tabimg1_2<-renderImage({
  list(src = tabfilename,
       contentType = 'image/png',
       alt = "This is alternate text")
}, deleteFile = FALSE)

    output$tabimg2<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$tabimg3<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    output$tabimg4<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg5<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg6<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg7<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg8<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg9<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg10<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)
    output$tabimg11<-renderImage({
      list(src = tabfilename,
           contentType = 'image/png',
           alt = "This is alternate text")
    }, deleteFile = FALSE)

    })

Thank you. The column approach solved the problem. I wanted to have two images side by side in each tab. So, in your tab approach, I do not see how, in tab 1 for example, two images are side by side. Column approach solved the problem anyway. I have to fiddle with width and height parameters. Thanks. — OverFlow Police, Nov 20 '19 at 17:26
@NoLie I have edited code and added picture side by side in TAB — Subhasish1315, Nov 21 '19 at 04:24

side by side images in R-shiny

1 Answers1