Shiny Web App导航栏图片替代标题失效问题求助

问题原因 #

当使用bslib::bs_theme()时，navbarPage的标题区域采用了新版Bootstrap的组件结构，传统的div包裹图片的写法无法被正确解析渲染，导致图片无法显示。

解决方案 #

直接使用外部图片URL #

将图片的完整URL传入img的src参数，用tags$span组合图片与文字，同时调整样式优化排版：

library(shiny)
library(bslib)

ui <- navbarPage(
  title = tags$span(
    img(
      src = "https://i.sstatic.net/mv6kr.png",
      height = 20,
      width = 20,
      style = "margin-right: 8px;"
    ),
    "My title"
  ),
  collapsible = FALSE,
  theme = bs_theme()
)

server <- function(input, output) {}

shinyApp(ui, server)

使用本地图片（需放在www文件夹） #

如果是本地图片，务必将图片放在Shiny项目根目录下的www文件夹中，再使用相对路径：

library(shiny)
library(bslib)

ui <- navbarPage(
  title = tags$div(
    class = "d-flex align-items-center",
    img(
      src = "proxy-image.png",
      height = 20,
      width = 20,
      style = "margin-right: 8px;"
    ),
    "My title"
  ),
  collapsible = FALSE,
  theme = bs_theme()
)

server <- function(input, output) {}

shinyApp(ui, server)

关键注意事项 #

• 利用Bootstrap的flex布局类（如d-flex align-items-center）可确保图片与文字垂直居中对齐
• 调整图片的margin样式，避免元素过于紧凑
• 外部图片需确保URL可正常访问，本地图片必须放在www目录下（Shiny默认的静态资源目录）

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