css - 将背景图像添加到 Shiny NavBarPage

Question

我正在尝试向 Shiny App 添加背景图片。我需要它固定在左上角。到目前为止，背景图片尚未加载。颜色正在加载，字体看起来不错。只是没有图像。

这是我的 CSS:

body {
  background-image: url("header.png");
  background-position: left top;
  background : #000000; 
}

这是我将它包含在我的 Shiny 中的地方:

ui = navbarPage(
  includeCSS("includes/style.css"),

在此先感谢您的帮助。

Answer 1

如果您想添加图像(或在 Shiny 的布局中自定义任何内容)，有两种方法可以做到。第一种是通过标签对象编写自己的 html，其中包含复制页面所需的所有功能

另一种(坦率地说更简单的方法)是对现有函数做一个小的修改。在 ui 方面， Shiny 标签只是列表，您可以访问、添加或替换其中任何您喜欢的附加标签。

首先，您需要保存生成的 Shiny 对象

所以，而不是:

ui.R

library(shiny)
navbarPage(title = 'test')

我们这样做:

ui.R

library(shiny)
FullPage <- navbarPage(title = 'test')
FullPage

一旦您拥有了 FullPage 对象，您就可以随意修改。每个级别要么是 Shiny 标签对象的列表，要么是 Shiny 标签对象本身。

Shiny 的标签对象有三个槽，

• name(如果标签用于 img，则为“img”)
• 属性(这可以是 css 的类，或 img 的 src，或任何新的您可以创建的属性)
• children(任何嵌套在其中的标签标签)

因此，为了在标题当前位于导航栏页面中的左上角添加图像，我将执行以下操作:

ui.R

FullPage <- navbarPage('test')
FullPage[[3]][[1]]$children[[1]]$children[[1]]$children[[1]] <- 
                    tags$img(src = 'logo.png', width = 60, height = 60)
FullPage

这里是做什么的？

好吧，navbarPage 生成了一个包含 3 个 Shiny 对象的列表，

前 2 个包含(我相信)头部，第三个包含页面的主体。

这本身就是一个 Shiny 对象列表，第一个包含标题部分。反过来，第一个 child 的第一个 child 是标题标签，因此我们将其替换为 tags$img 对象。我们可以用任何东西代替它。

例如 tags$a(href = 'http://mynewlinklocation', tags$img(src = 'logo.png')) 用于可点击的图像。

如果对您的页面进行任何其他自定义修改，我建议您在控制台中使用该对象。