Добавление изображений в заголовок и справа от navbarPage

Question

Я хотел бы включить маленькое изображение слева от заголовка моего navbarPage и полностью включить другое изображение справа от того же navbarPage. Я нашел этот ответ , который обеспечивает тот же макет, что и тот, который я хотел бы получить. Проблема в том, что это решение не дает полностью воспроизводимого примера, и я не могу понять, как включить куски кода в часть ui.

Кто-нибудь знает, как сделать из этого ответа воспроизводимый пример?

Вот что я пробовал до сих пор:

library(shiny)

ui <- navbarPage(
  tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
  )),
  tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a>`</div>');
    console.log(header)")
  ),

  title = div(img(src="image.png", height = '40px', width = '40px'), "something"),
  tabPanel("foo")
)
server <- function(input, output, session) {

}

shinyApp(ui, server)

Это изображение называется image.png. Я поместил его в папку www, которая находится в каталоге моего приложения.

В основном нужно решить две вещи: * некоторый текст отображается под панелью навигации, тогда как он не должен отображаться в все * изображение и текст слева не центрированы

Answer 1

Я не вносил никаких изменений в ваш код (ну, кроме тегов $ head () в начале, но это дополнение).

Единственная проблема с вашим кодом не проблема в вашем коде, это проблема в структуре ваших файлов.
Вы должны поместить свои изображения в новую папку с именем www (обратите внимание, что папка www is находится в том же месте, что и ваш код R, который является app.R или ui.R).

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$link(rel = "shortcut icon", type = "image/png", href = "image.png"),
    tags$title("Browser tab title")
  ),
  navbarPage(
    tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
    )),
    tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a></div>');
    console.log(header)")
    ),
    title = tags$div(img(src="image.png", height = '40px', width = '40px'), "something"),
    tabPanel("foo")
  )
)
server <- function(input, output, session) {

}

shinyApp(ui, server)

Примечание: Я добавил navbarPage внутри liquidPage, потому что без liquidPage заголовок NavBarPage будет title во вкладке браузера!
Но теперь основным пользовательским интерфейсом является FluidPage, поэтому его заголовком будет заголовок браузера.
это также дает вам возможность добавить новое изображение для вкладки браузера, отличное от вкладки страницы панели навигации.
Вот снимок экрана с выводом.
Надеюсь, это поможет!