在同一个 UI 元素中整齐地顺序显示不同尺寸的图像

在我的应用程序中，我需要在其他 UI 元素中显示单个预渲染图像。我希望其他元素紧紧包裹在图像的顶部和底部。显示的图像取决于应用程序的状态，并且图像的大小可能不同。

这个问题 https://stackoverflow.com/questions/29179088/flexible-width-and-height-of-pre-rendered-image-using-shiny-and-renderimage解决了类似的问题，但似乎有所不同，因为需要同时显示许多不同尺寸的图像。

这是显示问题的 MWE。您可以提供自己的图像，也可以将它们与我的 RStudio 项目的其余部分一起下载here https://www.dropbox.com/s/7llbcq0r9jz41za/dynamicImageResize.zip?dl=0.

library(shiny)
library(png)

ui <- fluidPage(
  tags$head(tags$link(rel="stylesheet", type="text/css", href="stylesheet.css")),
  selectInput("size", label="Size:", choices=c("small", "large")),
  imageOutput("image"),
  # uiOutput("imageUI"),
  textOutput("info")
)

# Define server logic required to draw a histogram
server <- function(input, output) {
  imgFileName <- reactive({
    paste0("./www/", input$size, ".png")
  })
  
  imgFile <- reactive({
    readPNG(imgFileName(), info=TRUE)
  })
  
  imgSize <- reactive({
    info <- unlist(stringr::str_split(attr(imgFile(), "info")$dim, stringr::fixed(" ")))
    info <- paste0(info, "px")
    names(info) <- c("width", "height")
    info <- as.list(info)
    info
  })
  
  output$info <- renderText({
    paste0("Height: ", imgSize()$height, "; Width: ", imgSize()$width)
  })
  
  output$image <- renderImage({
    list(
       src=imgFileName(),
       contentType="image/png",
       width=imgSize()$width,
       height=imgSize()$height,
       alt=paste0("A ", input$size, " image"),
       class="myImageClass"
    )
  })

  # output$imageUI <- renderUI({
  #   tagList(plotOutput("image"))
  # })
}

shinyApp(ui, server)

如果运行 MWE，您会发现当选择输入的值为small当选择输入时，图像与文本输出重叠large.

这些屏幕截图显示了所需的行为。

检查底层 HTML（在 Firefox 中，右键单击图像上的任意位置并选择“检查元素”），问题似乎是由div包裹图像：

The img已正确获取图像的大小，但周围的元素由内联固定到位height周围的属性div。为了证明这就是问题所在，我可以在 Firefox 的检查器中禁用有问题的高度属性：

这给了我想要的行为。

如果问题是由引用的 CSS 类之一引起的div，我可能可以通过覆盖应用程序样式表中的类定义来解决问题。但有问题的属性是内联的，所以这不是一个选择。

如何修改属性div包裹着img显示图像？

你真的很亲近uiOutput()这是必要的，因为您希望更改 UI 的布局。而您未注释的内容仅交换图像的进出，但保持 UI 布局不变。

library(shiny)
library(png)

ui <- fluidPage(
  tags$head(tags$link(rel="stylesheet", type="text/css", href="stylesheet.css")),
  selectInput("size", label="Size:", choices=c("small", "large")),
  
  # don't use imageOutput() here because the UI will not be able to change
  #imageOutput("image"),
  # instead use uiOutput() which will allow you to update the UI itself
  # that is, you will be able to update the height of the image div reactively
  uiOutput("imageUI"),
  textOutput("info")
)

server <- function(input, output) {
  imgFileName <- reactive({
    paste0("./www/", input$size, ".png")
  })
  
  imgFile <- reactive({
    readPNG(imgFileName(), info=TRUE)
  })
  
  imgSize <- reactive({
    info <- unlist(stringr::str_split(attr(imgFile(), "info")$dim, stringr::fixed(" ")))
    info <- paste0(info, "px")
    names(info) <- c("width", "height")
    info <- as.list(info)
    info
  })
  
  output$info <- renderText({
    paste0("Height: ", imgSize()$height, "; Width: ", imgSize()$width)
  })
  
  output$image <- renderImage({
    list(
       src=imgFileName(),
       contentType="image/png",
       width=imgSize()$width,
       height=imgSize()$height,
       alt=paste0("A ", input$size, " image"),
       class="myImageClass"
    )
  })

  # update the UI here by changing the height of the image div
  output$imageUI <- renderUI({
    imageOutput("image", height = imgSize()$height)
  })
}

shinyApp(ui, server)