如何在 R Shiny Dashboard 上的固定标题上/使用/上显示固定图像

Question

我正在使用 R Shiny Dashboard 包来创建仪表板。我实际上想要一个固定的标题，当我向下滚动时它不会移动。在这个标题的右上角，我想放一张图片。我的 css 文件名为“remaniement”，位于文件夹 \www

1. 第一个想法：我尝试参数化每个元素的宽度，例如将.skin-blue .main-header .navbar 的宽度设置为 80%，图片的宽度设置为 20%，但是当浏览器窗口大小发生变化时会出现问题。 /p>

2. 我尝试将页眉宽度设置为 100%，并将我的图像放在页眉上方。我不知道为什么，即使我在我的 css 文件上放了 z-index: 9999999;，图像总是在标题下方。

3. 对于上述两个想法，我尝试了在功能 dashboardBody() 或 dashboardHeader() 上编码的图片，但没有成功。

这是我的 ui.R 代码：

library(shiny)
library(shinydashboard)

header<-dashboardHeader(title = "Titre",disable = FALSE)
sidebar<-dashboardSidebar(sidebarMenu(menuItem("Home", tabName = "home", icon = icon("home"))))
body<-dashboardBody(
tags$link(rel = "stylesheet", href = "remaniement.css"),
tags$div(class="windows",tags$a(href='https://www.microsoft.com/en-gb/windows',target="_blank",tags$img(src='windows.png',width = 80))))

ui<-dashboardPage(skin = "blue",header,sidebar,body)

我的 server.R 代码：

server <- function(input, output,session) {}

还有我的css代码：

/*image that a want to put in the header*/
.windows{
position: fixed;
right: 0;
top: 0;
white-space: nowrap;
overflow: visible;
background-color: #FFFFFF;
z-index:9999999;}

/* logo */
.skin-blue .main-header .logo {
background-color: #3c8dbc;
color: #FFF;
position: fixed;
width: 230px;
white-space: nowrap;
overflow: visible;}

/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
width:80%;
position: fixed;
white-space: nowrap;
overflow: visible;
background: linear-gradient(90deg, #3c8dbc, #ffffff);
z-index:850;}

.skin-blue .main-header .navbar .sidebar-toggle {
position: fixed;
white-space: nowrap;
overflow: visible;}

.sidebar {
color: #FFF;
position: fixed;
width: 220px;
white-space: nowrap;
overflow: visible;}

.content-wrapper,
.right-side,
.main-footer{
-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
margin-left: 230px;
z-index: 820;
top:50px;
position: relative;
white-space: nowrap;
overflow: visible;
background-color: #ffffff;}

.main-sidebar,
.left-side {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
z-index: 810;
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;}

我真的迷路了，我已经坚持了3天多......

提前谢谢你！

Answer 1

（已编辑）

事情“非常简单”（但发现它有点苛刻）。

首先，我需要将图像目录设置为“资源路径”，如下所示：

addResourcePath("<name for my resource path>", "<actual path>"

如果可能，最好使用system.file() 来定义实际路径，这是一种干净的方式。您还可以使用resourcePath()检查您当前的资源路径（闪亮的默认值+您的）

然后，您可以在 UI 中使用 tags$img() 调用新注册的文件夹：

tags$img("<actual path>/local-path-to-your-image", ...) # ... can contain HTML parameter such as width and height

你就完了！