shiny - 使用 Shiny 和 renderImage() 预渲染图像的灵活宽度和高度

Question

我正在使用 renderImage() 将一堆预渲染图像调用到 Shiny 应用程序中。我希望这些 png 图像位于侧边栏中，并根据浏览器或设备类型(例如 Chrome、Android)调整宽度和高度。因此，我希望该应用程序适合移动设备。我不知道如何让它像这样灵活(例如，max-width = 500px 或 width = 100%，就像您在其他语言中所做的那样)。

一个简单的例子:

shinyUI(fluidPage(
  titlePanel("title panel"),

  sidebarLayout(
    sidebarPanel( "sidebar panel",
                  sliderInput("route", label = "Route Number:",
                              min = 1, max = 5, value = 1),
                  imageOutput("Image")),
    mainPanel("main panel")
  )
))

和服务器.R:

shinyServer(function(input, output) {
  output$Image <- renderImage({
    filename <- normalizePath(file.path('www/maps',
                                        paste(input$route, '.png', sep='')))
        list(src = filename,
         alt = paste("Image number", input$route))

  }, deleteFile = FALSE)
})

干杯，

凯特琳

Answer 1

我自己想出来了。据我所知，在 R 中没有办法处理这个问题。相反，通过添加如下内容来使用您的样式表(例如 bootstrap.css):

   img {
      border: 1;
      max-width: 100%;
    }
    element.style {
      width: 33.33%;
    }

我还成功地将它与 Shiny 中的传单 map 一起使用。这是我在样式表中所做的:

div#myChart2 {
  width: inherit;
}