在Shiny中并排对齐图像

时间:2019-02-13 03:48:13

标签: html image shiny tags side-by-side

我正在尝试对齐从网络上调用的图像,使其位于我闪亮的应用程序的中心。我在这里使用html标记,因为该图像文件未保存在我的计算机中,但我是从网络上调用它的。我的server.R文件中的 fifa_data [fifa_data $ Name == input $ player_name,] $ Photo 如下所示:Everything

这是现在看起来的快照,红色方块是我要显示图像的位置:

https://cdn.sofifa.org/players/4/19/200104.png

这是我的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")
        )
)
)
)

这是我服务器的罪人。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`)
  })

1 个答案:

答案 0 :(得分:1)

根据您的要求尝试以下代码

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)

输出的屏幕截图 enter image description here