如何将图像添加到 shinydashboard menuItem()s？答案

【问题标题】：How do I add an image to shinydashboard menuItem()s?如何将图像添加到 shinydashboard menuItem()s？
【发布时间】：2021-01-09 06:14:52
【问题描述】：

本质上，我想用图像替换shinydashboard 中每个menuItem() 中的icon。更具体地说，我只需要每个 menuItem() 有一个图像，然后在它旁边显示文本。

这是我尝试过的一些比较成功的尝试（在下面的代码中注释）;

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
 dashboardHeader(title = "Dashboard MenuItems"),
 dashboardSidebar(
   sidebarMenu(
     id = "tabs",
     menuItem(
       "Dashboard", 
       tabName = "dashboard",
       ## creates a drop down w/ no image
       # label = img(src = "logo.png",
       #             title = "logo", height = "35pt") 

       ## creates a drop down with the images
       # `tag$` isn't needed
       # tags$img(src = "logo.png",
       #     title = "logo", height = "35pt")
     ),
     menuItem(
       "Not Dashboard",
       tabname = "not_dashboard"
     )
   ) # end sidebarMenu
 ), # end dashboardSidebar
 dashboardBody(
   fluidRow(
     box(
       title = "stuff goes here",
       width = 12
     )
   )
 ) # end dashboardBody
)

server <- function(input, output, session) {
  message("You can do it!")
}

shinyApp(ui, server)

我成功地使用带有背景图像的操作按钮来模拟行为，但如果可能的话，我更愿意使用menuItem()s 找到解决方案。

我希望有一种类似的方法可以将图像添加到menuItem() 的背景中，或者将图像与menuItem() 中的文本连接起来。

我不擅长使用闪亮的标签。我对 HTML/CSS/JS 或 Bootstrap 知之甚少，大多数时候我都可以在这里找到解决方案并按照自己的方式破解我想要的方法，但这个方法却让我望而却步。

有什么想法吗？

【问题讨论】：

标签： r shiny shinydashboard

【解决方案1】：

您可以将图像保存在 www 文件夹中，并使用 div 将图像与文本一起包裹起来，如下所示。

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard MenuItems"),
  dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem( div(tags$img(src = "YBS.png", width="20px"), "Dashboard2"),
        tabName = "dashboard" # , icon=icon("b_icon") 
      ),
      menuItem( 
        div(tags$img(src = "mouse.png", width="35px"),"Not Dashboard"),
        tabname = "not_dashboard" #, icon=icon("home")
      )
    ) # end sidebarMenu
  ), # end dashboardSidebar
  dashboardBody(
    fluidRow(
      box(
        title = "stuff goes here",
        width = 12
      )
    )
  ) # end dashboardBody
)

server <- function(input, output, session) {
  message("You can do it!")
}

shinyApp(ui, server)

【讨论】：

谢谢！我认为这是相当基本的事情，但我的无知阻碍了我。