为shiny应用的不同tabPanel设置独立背景图片的最简方法

方法1：服务端动态监听切换（零基础友好，无需手写CSS） #

你之前调用setBackgroundImage不生效的核心原因是这个函数默认全局生效，且写在UI里只会在页面初始化时执行一次，切换tab不会触发重新设置。你可以直接在服务端监听navbarPage的id对应的输入值（你的代码里navbarPage id设为了Test，所以input$Test就是当前激活的tab的value值），切换时动态调用背景设置函数即可。

修改后完整可运行代码：

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){
  # 监听tab切换，动态设置背景
  observeEvent(input$Test, {
    if(input$Test == "welcome"){
      setBackgroundImage(src = "image1.jpg", shinydashboard = TRUE)
    } else if(input$Test == "first_tab"){
      setBackgroundImage(src = "image2.jpg", shinydashboard = TRUE)
    } else if(input$Test == "second_tab"){
      setBackgroundImage(src = "image3.jpg", shinydashboard = TRUE)
    }
  })
  
  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)

注意：如果使用本地图片，需要把图片放在shiny应用同级的www文件夹中，直接写文件名即可正常读取。

方法2：纯CSS实现（无需服务端监听，切换无延迟） #

如果不想走服务端逻辑，也可以直接在UI头部加入少量CSS代码，替换你原来的header部分即可：

header = tagList(
  useShinydashboard(),
  tags$style(HTML("
    .tab-content div[data-value='welcome'] {
      background-image: url('image1.jpg');
      background-size: cover;
      background-position: center;
      min-height: calc(100vh - 50px); /* 减去导航栏高度，撑满页面 */
    }
    .tab-content div[data-value='first_tab'] {
      background-image: url('image2.jpg');
      background-size: cover;
      background-position: center;
      min-height: calc(100vh - 50px);
    }
    .tab-content div[data-value='second_tab'] {
      background-image: url('image3.jpg');
      background-size: cover;
      background-position: center;
      min-height: calc(100vh - 50px);
    }
  "))
)

内容的提问来源于stack exchange，提问作者Linda