Static image (png) in R Shiny navbarPage

Question

I'm struggling to display a logo (logo.png) in the navbarPage of an R Shiny app. I followed the advice/instructions I found in the internet (for example here, here, here or here and even here) and in principle, it seems to work. At least the title appears and the padding is respected. However, only a placeholder is shown instead of the actual png and if you view the image it says "Not Found":

The structure of the app is as follows:

global.R
ui.R
server.R
www/img/logo.png

The code (located in ui.R):

shinyUI(
  navbarPage(
    title = div(img(src = "logo.png",
                    filetype = "image/png",
                    style = "margin-top: -14px;
                            padding-right: 20px;
                            padding-bottom: 10px"),
                "Title",
    tabPanel("Some",
             ...),
    ...
    )
)

I have the suspicion that the issue is somehow related to the structure of the Shiny app (I also tried with the full path of the logo www/img/logo.png without success), but I fail to figure out where.

Would be great if anyone could give me some advice or hint. Thank you :)

Indeed! It shows now :) But the layout is distorted, everything flushed to random places... :( Still, thank you! — bathyscapher, Oct 15 '21 at 06:22
I solved the positioning with html (see below). Can you maybe post your first comment as answer so that I can accept it? :) To place the logo left, insert this lines after `img(...)`: ```tags$script(HTML("var header = $('.navbar > .container-fluid'); header.append('
$\"logo\"$ `
'); console.log(header)")``` — bathyscapher, Oct 18 '21 at 06:31

score 2 · Accepted Answer · answered Oct 18 '21 at 18:17

By defaults, Shiny uses www as root for internet resources. So, if you have an image stored in working_path/www/img/img.png, the right path will be img/img.png.

If you want to specify other paths, use addResourcePath()

e.g. If you want to show an image under my_path/img/img.png you want first add the path

addResourcePath("new_root", "my_path")

Then refer it in Shiny as

img(src = "new_root/img/img.png")

Static image (png) in R Shiny navbarPage

1 Answers1