将不同背景图像设置为闪亮面板的最简单方法

Question

我想知道为我的 3 个闪亮的主标签面板中的每一个设置不同图像的最简单方法是什么？

我认为在它们每个中使用setBackgroundImage(src = "image1.jpg", shinydashboard = TRUE)、setBackgroundImage(src = "image2.jpg", shinydashboard = TRUE) 等都可以解决问题，但不幸的是它并不那么简单。

我想我应该使用一些 CSS，但我对此很陌生，我还没有找到解决问题的方法。

你猜我应该怎么做？

最小的应用程序：

library(shiny)
library(shinyWidgets)

ui <- shinyUI(navbarPage(id="Test", "TEST",
                         header = tagList(
                           useShinydashboard()
                         ),
                         tabPanel(
                           "Welcome", value="welcome",
                           verbatimTextOutput("text1")),
                         tabPanel(
                           "Tab1", value="first_tab",
                                    verbatimTextOutput("text2")),
                   tabPanel(
                     "Tab2", value="second_tab",
                     verbatimTextOutput("text3"))))
                   
server <- shinyServer(function(input, output, session){
 
  output$text1 <- renderText("Trying to set up a first background image in this whole panel")
  output$text2 <- renderText("Trying to set up a second background image in this whole panel")
  output$text3 <- renderText("Trying to set up a third background image in this whole panel")
  
  
})

shinyApp(ui, server)

Answer 1

您可以使用CSS background-image Property 来实现：

library(shiny)
library(shinyWidgets)

# remove /* ... */ to use the arguments

backgroundImageCSS <- "/* background-color: #cccccc; */
                       height: 91vh;
                       background-position: center;
                       background-repeat: no-repeat;
                       /* background-size: cover; */
                       background-image: url('%s');
                       "

ui <- shinyUI(navbarPage(id="Test", "TEST",
                         header = tagList(
                           useShinydashboard()
                         ),
                         tabPanel(
                           "Welcome", value="welcome",
                           verbatimTextOutput("text1"),
                           style = sprintf(backgroundImageCSS,  "https://images.plot.ly/language-icons/api-home/r-logo.png")
                         ),
                         tabPanel(
                           "Tab1", value="first_tab",
                           verbatimTextOutput("text2"),
                           style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/matlab-logo.png")
                         ),
                         tabPanel(
                           "Tab2", value="second_tab",
                           verbatimTextOutput("text3"),
                           style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/python-logo.png")
                         )
))

server <- shinyServer(function(input, output, session){
  output$text1 <- renderText("Trying to set up a first background image in this whole panel")
  output$text2 <- renderText("Trying to set up a second background image in this whole panel")
  output$text3 <- renderText("Trying to set up a third background image in this whole panel")
  })

shinyApp(ui, server)

当使用本地图像时，将它们存储到www 文件夹（您的应用文件夹的子目录）或使用addResourcePath 将图像作为静态资源添加到 Shiny 的 Web 服务器，

另见related answer。