Shiny应用设置navbarPage标题为图片时无法正常显示如何解决

问题原因 #

Shiny属于Web应用框架，启动后会在本地启动一个临时Web服务，浏览器只能通过该服务的资源规则请求静态文件：默认只有Shiny应用根目录下www文件夹内的文件会被托管为可访问的静态资源。你代码中直接填写本地桌面的绝对路径，浏览器无法跨权限读取本地文件系统中的对应图片，因此出现预留了展示位置但图片加载失败的问题。

修复步骤 #

• 在你当前Shiny脚本（单文件app.R、或者拆分的ui.R/server.R都适用）所在的文件夹下，新建一个命名为www的文件夹，这是Shiny默认的静态资源托管目录，名称必须为全小写的www。
• 将你需要使用的tafn_logo.png图片移动到刚才新建的www文件夹中。
• 修改UI代码里img标签的src参数，直接写图片文件名即可，不需要加www前缀，也不需要写本地绝对路径。

修改后完整UI代码 #

# header UI
ui <- navbarPage(title = div(img(src="tafn_logo.png",
                                 height = 60,
                                 style = "margin-top: -14px; padding-right:10px;padding-bottom:10px")),
                 selected = "home",
                 theme = bs_theme(
                     bg = "white",
                     fg = "#ed7117",
                     base_font = font_google("Prompt"),
                     code_font = font_google("JetBrains Mono")),
                 fluid = TRUE,
                 home)

补充说明 #

如果你需要对静态资源做分类管理，可以在www文件夹下新建子文件夹，比如创建img子文件夹存放所有图片资源，此时对应的src参数修改为src="img/tafn_logo.png"即可。

内容的提问来源于stack exchange，提问作者Ahmet Atilla Colak