Search code examples
rshinyshinydashboard

Displaying image in the top left html using R shiny

I am trying to incorporate an html page with an image in the top-left into R shiny and call from R studio. The issue is that the img command gets executed when the html file runs displaying the image but when Run in R, I just see a blank image space but no image gets displayed as in the snap below. Attached is the html and R code with snapshot in R.

#HTML code

<html>
<head><title>
Dashboard
</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-
scalable=no">
<header>
<img src="C:/D DRIVE DATA/reliance R/Final Template 
/wireframe/www/pepsi.png" height="43" width="145">
</img></header></head></html>

#R code

## app.R ##
library(shiny)
library(shinydashboard)
ui= 
dashboardBody(
tags$link(rel="stylesheet", type="text/css",href="bootstrap.css",
htmlTemplate("template.html"
))
)  
server= function(input, output)
{}
shinyApp(ui,server)

enter image description here

enter image description here

Solution

  • When you want to allow a Shiny app to give the user's browser access to images, CSS, etc., those objects needs to be in the www subdirectory of the app (or a further subdirectory of www).

    I haven't found a good reference in the documentation for this, but this article on styling Shiny using CSS covers the concept pretty well. Basically you need a www subdirectory in the same directory with your app.R, and then you can reference files within that subdirectory using relative paths.

    For example, your app directory may contain

    app.R
www/

    and www could contain

    pepsi.png
some_stylesheet.css
..etc..

    then using <img src="pepsi.png" ..> should work.