Adding images in the title and at the right of navbarPage

问题

I would like to include a small image at the left of the title of my navbarPage, and to include another image completely at the right of this same navbarPage. I found this answer which provides the same layout than the one I would like to have. The problem is that this solution does not provide a fully reproducible example and I can't figure out how to include the chunks of code in the ui part.

Does anybody know how to make a reproducible example from this answer?

Here's what I've tried so far:

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)

This is the image called image.png. I put it in the www folder, which is placed in my app directory.

There are mainly two things to solve: * some text is displayed on the below the navbar whereas it shouldn't be displayed at all * the image and the text at the left are not centered

回答1:

I did not make any change to your code (well except the tags$head() at the begining, but that's an add on).

The only problem with your code is not the problem in your code, is the problem in your files structure.
You have to place your images inside a new folder called www (Note that the folder www is in the same place as your R code which is app.R or 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)

Note: I've added the navbarPage inside a fluidPage because without the fluidPage, the title of the NavBarPage will be the title in the browser tab!
But now the main UI is the fluidPage so it's title will be the browser title.
this also gives you flexiblity to add a new image for the browser tab, different from the navbar page's tab.
Here's the screen shot of the output.
Hope this helps!

来源：https://stackoverflow.com/questions/60151766/adding-images-in-the-title-and-at-the-right-of-navbarpage

标签

Shiny