我正在尝试将背景图片添加到Shiny App。我需要它固定在左上角。到目前为止,背景图像未加载。颜色正在加载,字体看起来很好。只是没有形象。
这是我的CSS:
body {
background-image: url("header.png");
background-position: left top;
background : #000000;
}
这里是我将它包含在我的Shiny中的地方:
ui = navbarPage(
includeCSS("includes/style.css"),
提前感谢您的帮助。
答案 0 :(得分:4)
如果要添加图像(或者在闪亮的布局中自定义任何内容),有两种方法可以实现。第一种是通过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'))
表示可点击的图片。
对页面进行任何其他自定义修改后,我建议在控制台中使用该对象。
答案 1 :(得分:1)
您应该使用 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;
}
答案 2 :(得分:0)
如果图像位于项目的www文件夹中,请在ui.R文件中使用以下代码-
tags$style(
HTML(
paste0(
"body{
background: url('./(Image-name.extension)') no-repeat center center fixed;
}"
)))