如何在Python Shiny的page_navbar左侧添加Logo图片？

针对你的问题，以下是几种排查和修复方案：

1. 修正Title参数的写法 #

你当前代码中title参数里的空字符串可能导致Logo元素被挤压或无法正常渲染，去掉空字符串即可：

from shiny import App, ui

app_ui = ui.page_navbar(
    ui.nav_panel("Bar", ui.h2("Bar plot")),
    ui.nav_panel("Map", ui.h2("Cloropleth")),
    ui.nav_spacer(), 
    ui.nav_control(ui.input_dark_mode(id="dark_mode_switch")),
    # 移除空字符串，直接用a标签包裹Logo
    title=ui.tags.a(ui.tags.img(src="logo.png", height="30px"), href="#")
)

app = App(app_ui, server=None)
if __name__ == '__main__':
    app.run()

2. 更灵活的Logo放置方式：使用ui.nav_item #

如果希望Logo完全独立于Title区域，可以在第一个导航面板前添加ui.nav_item来放置Logo，这种方式布局更可控：

from shiny import App, ui

app_ui = ui.page_navbar(
    # 在导航面板前插入Logo，添加margin避免和菜单挤在一起
    ui.nav_item(ui.tags.img(src="logo.png", height="30px", style="margin-right: 10px;")),
    ui.nav_panel("Bar", ui.h2("Bar plot")),
    ui.nav_panel("Map", ui.h2("Cloropleth")),
    ui.nav_spacer(), 
    ui.nav_control(ui.input_dark_mode(id="dark_mode_switch")),
    title=""  # 清空默认Title位置，避免重复内容
)

app = App(app_ui, server=None)
if __name__ == '__main__':
    app.run()

关键排查点 #

• 文件路径与大小写：确保www文件夹下确实存在logo.png，文件名和代码中的完全一致（Linux/macOS系统区分大小写，Windows不区分）
• 浏览器控制台检查：按F12打开开发者工具，切换到「网络」标签页，查看logo.png的加载状态：
  • 若显示404：说明文件路径或名称错误
  • 若加载成功（200状态）但不显示：检查img标签的height/width属性，或添加CSS样式调整显示

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