Align image side-by-side in Shiny

Question

I am trying to align the image I calling from the web to be in the center on my shiny app. I am using the html tag here because the image file is not saved in my computer, but I am calling it from the web. fifa_data[fifa_data$Name==input$player_name,]$Photo in my server.R file looks something like this: "https://cdn.sofifa.org/players/4/19/200104.png"

Here is an snapshot of what it looks like now, and the red square is where I want the image to be displayed:

Here is a snippet of my ui.R

ui2<- dashboardPage(
  dashboardHeader(title="BIG Player Hunter"),
dashboardSidebar(
fluidRow(
         uiOutput(outputId = "image")),
fluidRow(
  uiOutput(outputId = "image2")),
fluidRow(
  uiOutput(outputId = "image3")),
         # uiOutput(outputId = "image2"),
         # uiOutput(outputId = "image3")),
selectizeInput('player_name',"Player Name:",
               choices=fifa_data$Name,
               selected=NULL,
               multiple=TRUE),
sliderInput("player_count",
            "Number of players:",
            min=1,
            max=50,
            value=5),
sliderInput("proximity",
            "How close:",
            min=0.01,
            max=0.99,
            value=0.05),
sliderInput("valuerange", "Price Range", min = 0, max = max(fifa_data$ValueNumeric_pounds), 
            value = c(25, 75)),

actionButton("search", "Search"),

sidebarMenu(
  menuItem("Shoot 소개", tabName = "shoot_info", icon= icon("heart", lib= "glyphicon")),
  menuItem("점수순위 및 분석", tabName = "leaderboard", icon= icon("bar-chart-o")),
  menuItem("참가신청서", tabName = "signup", icon=icon("pencil", lib= "glyphicon"),
           badgeLabel = "관리자", badgeColor = "red")
),
uiOutput("checkbox")
),
dashboardBody(
  tabItem(tabName = "shoot_info",
        fluidRow(
          dataTableOutput("table1"),
          chartJSRadarOutput("radarchart1")
        )
)
)
)

Here is a sinner of my server.R

output$image<- renderUI({
    tags$img(src= fifa_data[fifa_data$Name==input$player_name,]$Photo)
  })

  output$image2<- renderUI({
    tags$img(src= fifa_data[fifa_data$Name==input$player_name,]$Flag)
  })

  output$image3<- renderUI({
    tags$img(src= fifa_data[fifa_data$Name==input$player_name,]$`Club Logo`)
  })

Can you give a reproducible example? If i create my own working example the image is centered. It is not clear now what is causing the problem. — Wilmar van Ommeren, Feb 13 '19 at 10:21
Hi Wilmar, I just edited my code. I am trying to display 3 images (image1, image2, and image3) side by side, but it looks like image2 and image 3 are out of the frame. — user9532692, Feb 14 '19 at 04:16
Putting uiOutput(outputId = "image") and the other two inside the same fluidRow() produces the same result. — user9532692, Feb 14 '19 at 04:18

msr_003 · Answer 1 · 2019-02-20T04:46:18.620

Try the below code for your requirement

library(shiny)
library(shinydashboard)
header <- dashboardHeader()
body <- dashboardBody()
sidebar <- dashboardSidebar(uiOutput("images"),
                                sliderInput("player_count",
                                            "Number of players:",
                                            min = 1,
                                            max = 50,
                                            value = 5),
                                sliderInput("proximity",
                                            "How close:",
                                            min = 0.01,
                                            max = 0.99,
                                            value = 0.05),
                                actionButton("search", "Search")
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
  output$images <- renderUI({
  tags$div(img(src = "image1.png", width = 70, height = 90), img(src = "image2.png", width = 70, height = 90), img(src = "image3.png", width = 70, height = 90))
})
    }
shinyApp(ui, server)

The screenshot of output

Align image side-by-side in Shiny

1 Answers1