CODEWITHSUNDEEP
rshinyshinydashboard
Ashmin Kaul
Ashmin Kaul

Reputation: 860

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

Upvotes: 0

Views: 1937

Answers (1)

Brian Stamper
Brian Stamper

Reputation: 2263

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.

Upvotes: 1

Related Questions