在标题和 navbarPage 右侧添加图像

Question

我想在我的navbarPage 的标题左侧添加一张小图片，并在同一navbarPage 的右侧添加另一张图片。我发现this answer 提供的布局与我想要的布局相同。问题是该解决方案没有提供完全可重现的示例，我无法弄清楚如何在ui 部分中包含代码块。

有人知道如何从这个答案中制作一个可重现的例子吗？

这是我迄今为止尝试过的：

library(shiny)

ui <- navbarPage(
  tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
  )),
  tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a>`</div>');
    console.log(header)")
  ),

  title = div(img(src="image.png", height = '40px', width = '40px'), "something"),
  tabPanel("foo")
)
server <- function(input, output, session) {

}

shinyApp(ui, server)

This is the image 称为image.png。我把它放在www文件夹中，该文件夹放在我的app目录下。

主要有两点需要解决： * 一些文本显示在导航栏下方，而根本不应该显示 * 左边的图片和文字没有居中

Answer 1

我没有对您的代码进行任何更改（除了一开始的 tags$head() 之外，但这是附加的）。

您的代码的唯一问题不是代码中的问题，是文件结构中的问题。
您必须将图像放在一个名为 www 的新文件夹中（请注意，文件夹 www 与您的 R 代码位于同一位置，即 app.R 或 ui .R).

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$link(rel = "shortcut icon", type = "image/png", href = "image.png"),
    tags$title("Browser tab title")
  ),
  navbarPage(
    tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
    )),
    tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a></div>');
    console.log(header)")
    ),
    title = tags$div(img(src="image.png", height = '40px', width = '40px'), "something"),
    tabPanel("foo")
  )
)
server <- function(input, output, session) {

}

shinyApp(ui, server)

注意：我已经将 navbarPage 添加到了 FluidPage 中，因为没有 FluidPage，NavBarPage 的标题将是浏览器选项卡中的标题！
但现在主 UI 是fluidPage 所以它的标题将是浏览器的标题。
这也让您可以灵活地为浏览器选项卡添加新图像，这与导航栏页面的选项卡不同。
这是输出的屏幕截图。
希望这会有所帮助！