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

如果要添加图像（或者在闪亮的布局中自定义任何内容），有两种方法可以实现。第一种是通过tags对象编写自己的html，其中包含重现页面所需的所有函数

另一种（并且坦率地说更简单的方法）是对现有功能进行一些小修改。在ui方面，闪亮的标签只是列表，您可以访问，添加或替换您喜欢的任何其他标签。

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

所以，而不是：

ui.R

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

我们这样做：

ui.R

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

一旦拥有了FullPage个对象，就可以修改任何你想要的内容。每个级别都是闪亮标记对象的列表，或者是闪亮的标记对象本身。

闪亮的标签对象有三个插槽，

name（如果标签是img，那就是＆＃39; img＆＃39;）
attribs （这可能是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个闪亮对象的列表

前2个包含（我相信）头部，第三个包含页面正文。

这本身就是一个闪亮的对象列表，第一个包含标题部分。反过来，第一个孩子的第一个孩子是标题标签，因此我们用tags$img对象替换它。我们可以用任何东西取而代之。

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

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

Answer 2

您应该使用 background-color 而不是 background 。

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

背景是一种简写，它将所有省略的值设置为各自的默认值， background-image 为“none”。

如果您想使用速记，它将如下所示：

body {
  background: #000 url("header.png") left top;
}

Answer 3

如果图像位于项目的www文件夹中，请在ui.R文件中使用以下代码-

 tags$style(
HTML(
paste0(
"body{
      background: url('./(Image-name.extension)') no-repeat center center fixed;

     }"
    )))

将背景图像添加到Shiny NavBarPage

3 个答案: