将图像放在R Shiny中navbarPage（）布局中导航栏的右端

Question

我希望复制与RStudio的SuperZip Shiny仪表板类似的布局，可在此处使用：https ://shiny.rstudio.com/gallery/superzip-example.html

该应用程序的代码可在此处获取：https : //github.com/rstudio/shiny-examples/tree/master/063-superzip-example

根据该代码，我想在导航栏的右端添加一个图像（假设为Rstudio徽标），并在下图中用红色框突出显示。我认为我需要添加一些HTML和CSS代码，但不确定如何继续。

我的问题类似于以下问题：如何将图像插入闪亮的navbarPage（）上的导航栏中

但是，请注意，答案提供了将图像放在导航栏的左端的指示。我要求将其放在导航栏的右端。

Answer 1

链接的解决方案可能无法将徽标放置在右侧。我建议对徽标使用一些JavaScript代码。appendnavbar

解决方案：

1. 创建JS文件（我将文件命名为code.js）

应用加载完成后，会将徽标附加到导航栏。（图像向右对齐）

$( document ).ready(function() {
  $( ".navbar .container-fluid" ).append( '<img src="logo.png" align="right">' );
});

2. 将徽标（在我的情况下logo.png）和JS文件放在www文件夹中。

3. 将js文件包含在 tags$head

您需要使用tagListwith navbarPage，否则导航栏上会出现一个可单击的“ ghost”标签。

ui <- tagList(
  tags$head(tags$script(type="text/javascript", src = "code.js")),
  navbarPage(title = "Right aligned logo",
             tabPanel("tab1"),
             tabPanel("tab2")
  )
)