如何使 Shiny 应用程序中的图像宽度动态化？答案

【问题标题】：How can I make the width of an image in a Shiny app dynamic?如何使 Shiny 应用程序中的图像宽度动态化？
【发布时间】：2015-05-27 09:35:38
【问题描述】：

我正在编写一个应用程序，我希望侧边栏面板中的图像比我放入其中的图像大一点。随着窗口变小或变大，侧边栏也会变小或变大，但图像保持静止。我该如何解决这个问题？有没有办法获取侧边栏的长度或有更好的方法来渲染图像？

ui.R

library(shiny)

shinyUI(bootstrapPage(

   # Application title
   titlePanel("Sidebar Image App"),
   sidebarPanel(
      imageOutput("image", height = "auto")
   )
))

服务器.R

library(shiny)

shinyServer(function(input, output, session) {

   output$image <- renderImage({
      return(list(
         src = "one.png",
         contentType = "image/png",
         height = 185,
         alt = "Face"
      ))
   })
})

【问题讨论】：

标签： css r image shiny

【解决方案1】：

您可以使用 css 标记为图像设置样式，如下所示：

shinyUI(bootstrapPage(
    titlePanel("Sidebar Image App"),

    tags$head(tags$style(
        type="text/css",
        "#image img {max-width: 100%; width: 100%; height: auto}"
    )),

    sidebarPanel(
        imageOutput("image")
    )
)),

其中 css id 选择器（此处为 #image）应对应于 imageOutput 的 outputId。

【讨论】：

如何添加图片源？