Adding images to flexdashboard - or modifying any aesthetics in flexdashboard

shiny
,
#1

There appears to be a real dearth of information/resources on the internet for creating shiny apps using flexdashboard in rmarkdown files. I needed to run a simulation, so I copied the instructions here: https://rviews.rstudio.com/2018/07/18/monte-carlo-shiny-part-3/. Everything went well, but I'm finding it impossible to modify the aesthetics of a shiny app via and rmarkdown file. I've tried the following to add an image:

---
title: "Monte Carlo"
runtime: shiny 
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    source_code: embed
always_allow_html: yes
--- 

![Example](Example.png)
img(src = "Example.png", height = 200, width = 200)
<img src="Example.png" />
include_graphics("Example.png")
tags$img(Example.png)
fluidPage(tags$img(src="Example.png"))

I've tried all of these inside and outside of code chunks. The image is in the same folder that my RMD file is saved in. I've also tried putting it in a www subfolder.

The only one of the above that works is the first one. All of the other commands cannot find the image. When I use the first one, the image renders properly in the RMD file but disappears when I run the document.

This seems to be an issue with flexdashboard and RMD. Do I have to abandon these and start again in a regular shiny R file?

#2

This link might be useful for troubleshooting your issue: Placing image in Shiny titlePanel

Could you include a reprex or include more of your code? That would help us more clearly see what you've attempted, and to provide tips.

Edit: here's some additional info from the in-progress Shiny book https://mastering-shiny.org/action-graphics.html#images

1 Like
#5

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

#4

For anyone else who stumbles across this:

If you want to add text around an image or output using flexdashboard, make sure to add <div> </div> around the image/output.

For example:

<div>
renderTable
</div>

or

<div>
include_graphics("Example.png")
</div>

#3

I just tried to create a simple reprex since I have 500 lines of code. I selected File > New File > Shiny Web App and selected a name for the folder. Then, within that folder, I created a New RMD Shiny Document with the same name as the folder. I added the image to that folder (not in a www sub-folder). If I make the name of the RMD file the same name as the shiny app folder, it is able to find the image. That seems to be the key. If I change the name of the RMD file (even if its within that same folder), it cannot find the image. Further, the folder has to be initialized by creating a Shiny Web App document (even though you won't be modifying it).

I just press Run Document on the RMD file to launch the app. I'm not sure what purpose the app.R document serves. I didn't even realize it exists and have been successfully deploying the app without it, but I seemed to need it to set things up.

I feel like I might be missing some important steps and should have a corresponding app/ui/server R file, but I don't understand why I'm able to successfully launch the app without it. None of this seems to really follow from any of the instructions I've found online (including the book you linked - which is great, thank you!).

Thank you so much.