如何将公司徽标添加到 ShinyDashboard 标题（不是 mainPanel 或 mainHeader）

Posted 2023-03-13

【中文标题】如何将公司徽标添加到 ShinyDashboard 标题（不是 mainPanel 或 mainHeader）

【英文标题】：How to add a company Logo to ShinyDashboard header (Not mainPanel or mainHeader)

【发布时间】：2016-06-27 23:34:15

【问题描述】：

我尝试参考以下答案，但徽标位于主面板内，而不是标题面板内...有什么解决方案吗？

Adding a company Logo to ShinyDashboard header Embedding Image in Shiny App Add company logo to every page using Rstudio and knitr [duplicate]

我看到DISTRIBUTIONS OF RANDOM VARIABLES 在主面板的标题内有一个徽标，但无法在 shinyDashboard 标题中工作。以下是公司徽标标题的编码：

headerPanel(
        html('Distributions of Random Variables v4
            <a href="http://snap.uaf.edu" target="_blank"><img align="right"  src="./img/SNAP_acronym_100px.png" /></a>'
        ), "Distributions of Random Variables"
    ),

下面是我添加公司徽标的代码，source codes 在这里。有什么想法吗？

dbHeader <- dashboardHeader(title = 'Reporting Dashboard',
            dropdownMenuOutput('messageMenu'),
            dropdownMenu(type = 'notifications',
                         notificationItem(text = '5 new users today', icon('users')),
                         notificationItem(text = '12 items delivered', 
                                          icon('truck'), status = 'success'),
                         notificationItem(text = 'Server load at 86%', 
                                          icon = icon('exclamation-triangle'), 
                                          status = 'warning')),
            dropdownMenu(type = 'tasks',
                         badgeStatus = 'success',
                         taskItem(value = 90, color = 'green', 'Documentation'),
                         taskItem(value = 17, color = 'aqua', 'Project X'),
                         taskItem(value = 75, color = 'yellow', 'Server deployment'),
                         taskItem(value = 80, color = 'red', 'Overall project')))
dbHeader$children$children <- HTML("<a href='http://www.scibrokes.com' target='_blank'>
                        <img align='right' alt='Logo' src='./oda-army.jpg'/></a>")

【参考方案1】：

解决方案是隐藏您的图像，以便shiny 呈现它，就像它呈现一个普通的dropdownMenu 项目一样。

正如您可能从控制台看到的那样，dashboardHeader 抛出错误

Error in FUN(X[[i]], ...) : Expected tag to be of type li

如果您尝试插入 任何 自定义 HTML。如果你选择一个li 标签，它甚至会详细说明

Error in FUN(X[[i]], ...) : Expected tag to have class 'dropdown'

所以这是你的交易，将你的图像添加到 li 包装器中，类为 dropdown，你就可以开始了。

示例代码：

library(shinydashboard)
library(shiny)

runApp(
  shinyApp(
    ui = shinyUI(
      dashboardPage(
          dashboardHeader(title = 'Reporting Dashboard',
            tags$li(class = "dropdown",
                    tags$a(href="http://snap.uaf.edu", target="_blank", 
                           tags$img(height = "20px", , src="https://www.snap.uaf.edu/sites/default/files/pictures/snap_symbol_color.png")
                    )
            ),
            dropdownMenuOutput('messageMenu'),
            dropdownMenu(type = 'notifications',
                         notificationItem(text = '5 new users today', icon('users')),
                         notificationItem(text = '12 items delivered', 
                                          icon('truck'), status = 'success'),
                         notificationItem(text = 'Server load at 86%', 
                                          icon = icon('exclamation-triangle'), 
                                          status = 'warning')),
            dropdownMenu(type = 'tasks',
                         badgeStatus = 'success',
                         taskItem(value = 90, color = 'green', 'Documentation'),
                         taskItem(value = 17, color = 'aqua', 'Project X'),
                         taskItem(value = 75, color = 'yellow', 'Server deployment'),
                         taskItem(value = 80, color = 'red', 'Overall project'))
          ),

          dashboardSidebar(),
          dashboardBody()
      )
    ), 

    server = function(input, output)

  ), launch.browser = TRUE
)

希望这会有所帮助！

【参考方案2】：

dashboardBody( 
    tags$img(align="right",src="http://www.pagesolutions.co.uk/wp-content/uploads/2016/03/Finalised-logo.png",),
    tags$strong("PAGE SOLUTIONS",style="color:#0a90d3"),tags$p("CLASSIFICATION MODELING",style="color:black"),
    tags$p("Customer Classification"),
    ...
)