闪亮的自调整图标图像

Question

我有一个闪亮的应用程序，我想在其中包含带图像的操作按钮。下面是一个示例代码：

library(shiny)
library(shinyWidgets)
library(shinydashboard)

url = "http://images.all-free-download.com/images/graphicthumb/button_play_89677.jpg"

ui <- fluidPage(
  fluidRow(
    box(width = 12,
        column(
          3, actionBttn(
            "button1", label = "figure 1",
            icon = div(img(src = url)),
            block = FALSE,
            style = "fill"
          )),
        column(
          3, actionBttn(
            "button2", label = "figure 2",
            icon = div(img(src = url)),
            style = "fill"
          )),
        column(
          3, actionBttn(
            "button3", label = "figure 3",
            icon = div(img(src = url)),
            style = "fill"
          )),
        column(
          3, actionBttn(
            "button4", label = "figure 4",
            icon = div(img(src = url)),
            style = "fill"
          ))
    )
    
  )
)

server <- function(input, output) {
  output$action = renderText('abc')
}

app = shinyApp(ui = ui, server = server)
runApp(app)

这会导致如果浏览器未最大化，图像会重叠而无法完全显示。有没有办法告诉 shiny 躲避图像并完整显示每个图像？

提前致谢！

Answer 1

这样看起来还不错:

icon = div(
  style = "width: 100%; height: 100%", 
  img(src = url, style = "width: inherit; height: inherit;")
)

闪亮的自调整图标图像

Shiny self-adjusting icon images

r

shiny

shinydashboard

shinyapps