R Shiny navbarPage中的静态图像（png）答案

【问题标题】：Static image (png) in R Shiny navbarPageR Shiny navbarPage中的静态图像（png）
【发布时间】：2021-12-03 00:00:20
【问题描述】：

我正在努力在 R Shiny 应用程序的 navbarPage 中显示徽标 (logo.png)。我遵循了我在互联网上找到的建议/说明（例如here、here、here 或here 甚至here），原则上它似乎有效。至少出现标题并尊重填充。但是，只显示一个占位符而不是实际的 png，如果您查看图像，它会显示“未找到”：

应用的结构如下：

global.R
ui.R
server.R
www/img/logo.png

代码（位于ui.R）：

shinyUI(
  navbarPage(
    title = div(img(src = "logo.png",
                    filetype = "image/png",
                    style = "margin-top: -14px;
                            padding-right: 20px;
                            padding-bottom: 10px"),
                "Title",
    tabPanel("Some",
             ...),
    ...
    )
)

我怀疑这个问题与 Shiny 应用程序的结构有某种关系（我也尝试过使用徽标的完整路径 www/img/logo.png 没有成功），但我不知道在哪里。

如果有人能给我一些建议或提示，那就太好了。谢谢你:)

【问题讨论】：

试试img/logo.png
确实！它现在显示了 :) 但是布局被扭曲了，所有东西都被冲到了随机的地方...... :( 不过，谢谢！
你可能想玩 CSS
我用html解决了定位问题（见下文）。您能否发表您的第一条评论作为答案，以便我接受？ :) 要将徽标放在左侧，请在 img(...) 之后插入此行：tags$script(HTML("var header = $('.navbar > .container-fluid'); header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"img/logo-ioew.png\" alt=\"logo\" style=\"float:right;width:auto;height:43px;padding-top:10px;\"> </a>`</div>'); console.log(header)")
当然，我还添加了一些细节。

标签： r shiny png

【解决方案1】：

默认情况下，Shiny 使用www 作为互联网资源的根。所以，如果你有一个图片存储在working_path/www/img/img.png，那么正确的路径就是img/img.png。

如果要指定其他路径，请使用addResourcePath()

例如如果要在my_path/img/img.png 下显示图像，则需要先添加路径

addResourcePath("new_root", "my_path")

然后在 Shiny 中引用它为

img(src = "new_root/img/img.png")

【讨论】：