如何在闪亮的 navbarPage() 上将图像插入导航栏

Posted 2023-03-24

【中文标题】如何在闪亮的 navbarPage() 上将图像插入导航栏

【英文标题】：How can I insert an image into the navbar on a shiny navbarPage()

【发布时间】：2014-09-02 12:48:26

【问题描述】：

我正在使用navbarPage() 布局构建一个闪亮的应用程序。我想在屏幕右侧的导航栏中插入一个图像。例如，它看起来像 *** 网站顶部的导航栏，但最右边有一个徽标。我试过了：

shinyUI(
   navbarPage (title="test Page" ,
      img(src="mylogo.gif", style="float:right; padding-right:25px"),
      tabPanel(title="Panel 1",...)
 ))

然而，这一切只是在导航栏最右下方显示图像，而不是第一个选项卡的内容（注意 - 根据需要，图像位于 www 目录中）。

我可以使用icon= 参数，但这会将图标放在浏览器的选项卡上。

关于如何将图像放在导航栏上的任何想法？

【问题讨论】：

你为什么不把它编码为 $logo = ""; ???

我没有关注，我尝试在我现在有img() 的地方添加这个，我得到的只是一个关于意外$ 的错误。我应该在哪里添加这个？

更改：shinyUI( navbarPage (title="test Page" , img(src="mylogo.gif", style="float:right; padding-right:25px"), tabPanel(title= "面板 1",...))) 放入：$logo = "";就做 echo($logo);在您需要/想要添加它的地方

我真的不明白你为什么要这样做。它只有 1 个徽标……即使它应该支持多个主题徽标，我也会这样做：$logo = Array('theme1' => '<img src="..." />', 'theme2' => '<img src="..." />'); 并且您最终还是将其写为 html xD

哦等等我看错了你的问题xD我实际上把它当作普通的php而不是shinyUI

【参考方案1】：

我现在可以回答这个问题了，至少对于闪亮的 0.10.0。一般的想法是将title= 设置为包含标题的图像和文本的div()。

然而，这会产生一个新问题，即icon= 参数不再有效，并且您无法为窗口设置标题。为了解决这个问题，我遵循了 Andy Singleton 的建议here。建议是在navbarPage() 上方创建一个fluidPage()，用于保存窗口标题和图标。通过使此页面高度为 0 像素，它在应用程序中被隐藏。这是代码的关键部分。

ui.r:

shnyUI(
  fluidPage(
     list(tags$head(HTML('<link rel="icon", href="MyIcon.png", 
                                   type="image/png" />'))),
     div(style="padding: 1px 0px; width: '100%'",
         titlePanel(
                title="", windowTitle="My Window Title"
         )
      ),
      navbarPage(
         title=div(img(src="myLogo.gif"), "My Title in the Navbar"),
         tabPanel(....

【参考方案2】：

对于那些在导航栏中有不止一张图像的人，title= 仅适用于其中一张图像，除非你喜欢可怕的格式。

下面的代码允许用户在标题中附加一个新图像，该图像也是超链接的。我用它来创建一个 GitHub 徽标并链接我的存储库。

# Create Right Side Logo/Image with Link       
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"Logo.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a>`</div>');
    console.log(header)")
    ),

header.append 到 </a></div>');需要在 R 中的一行代码中

我们所做的只是将这段代码标记为 HTML 脚本，因此所有内容都作为字符串传递给 R，并作为 HTML 代码读取。幸运的是，我们可以更改图片的大小，并使用padding-left,right,top,bottom: _px 移动它。

请注意，container-fluid 是我的导航栏，但您的应用可能会有所不同。其他格式选项可以包含在代码的样式部分中。

请注意，您也可以添加文本，并以这种方式链接它。

# Create Right Side Text
 tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>Follow us on GitHub</h3></div>');
 )),

再次确保 header.append 到 </div>'); 在 R 中的同一行代码中

【讨论】：

如果我将脚本保存在 .js 文件中，我无法加载图像。代码被读取但不包含图像

嗨，我知道上一版是一年多以前制作的，但我真的很想有一个与您类似的导航栏页面，但我不知道如何在 @987654333 中包含您的代码@。您是否介意在您的帖子中添加一个可重现的小示例（如果可能的话，也可以使用 github 图像）？

其实我把这个作为一个新问题发布了here

只是为了补充这个出色的答案：您可以将 tags$script() inside 粘贴到标题调用中。例如：navbarPage(title=div("Some Title", tags$script(...)), rest of code)。一开始我不确定在哪里放置这段额外的代码，但如果你将标题指定为div()，你可以简单地在其中包含它。

很好的答案！我想这对每个人来说都是显而易见的，但我花了一段时间才弄清楚，<ahref=\"URL\"> 中缺少一个空格。

【参考方案3】：

这是基于@John Paul 的answer，但对我来说似乎更简单。 首先将您的页面标题放入一个变量中，因为我们将使用它两次——作为窗口标题并在我们的页面上：

PAGE_TITLE <- "My great title"

在您的流体页面下方：

  titlePanel(windowTitle = PAGE_TITLE,
             title =
               div(
                 img(
                   src = "my_logo.png",
                   height = 100,
                   width = 100,
                   style = "margin:10px 10px"
                 ),
                 PAGE_TITLE
               )
             ),

【参考方案4】：

这是我根据之前的好答案提出的解决方案：

 ui <- 
   fluidPage(  
       list(
         tags$head(
           HTML('<link rel="icon" href="favicon.png" 
                type="image/png" />'))),

    navbarPage("App user name", windowTitle = "App name",
    ...

图片保存位置是Shiny应用服务器上的“www”文件夹：

shinyApp/app.R
shinyApp/www/favicon.png