Where to store background picture in a shiny app using golem framework

Question

I have this working example app. Here I set 12092021.png as background picture. 12092021.png lives in the www folder in the root directory -> Everything is perfect.

library(shiny)

ui <- fluidPage(
  
  #background image
  tags$img(
    src = "12092021.png",
    style = 'position: absolute; position: absolute;
      width: 1024px; height: 768px;'
  ),
  
  tags$head(
    tags$style(HTML("
      #container > .form-group {
        height: 30px; 
        margin-bottom: 5px;
        font-size:30px
      }"))
  ),
  
  tags$style("#a {font-size:30px;}"),
  tags$style("#b {font-size:30px;}"),
  tags$style("#c {font-size:30px;}"),
  
  tags$style("#a1 {font-size:30px;height:30px;}"),
  tags$style("#b1 {font-size:30px;height:30px;}"),
  tags$style("#c1 {font-size:30px;height:30px;}"),
  
  numericInput("a1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  numericInput("b1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  numericInput("c1", "", value = 0, min=0, max=3, step=1, width = "100px"),
  div(id = "container",
      style="position: relative;left: 650px; top: 190px; ",
      numericInput("a", "", value = 0, min=0, max=3, step=1, width = "100px"),
      numericInput("b", "", value = 0, min=0, max=3, step=1, width = "100px"),
      numericInput("c", "", value = 0, min=0, max=3, step=1, width = "100px")
  )
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

Now I am playing around with golem to create a package of my shiny app. There are a lot of things that are quite new for me. I managed that the app works using run_app().

My question is, where do I have to save the www folder within the golem framework and how would the path look like to get my background picture presented?

So far I have copied the www folder to the R folder and also to inst/app/.

No own experience, but here's mention of workflow and using `app_sys()` or `addResourcePath()` depending on when your image is "injected". Since you're placing it with CSS (I guess), the latter should be correct: https://engineering-shiny.org/golem.html#instappwww — I_O, Dec 26 '22 at 15:34
@I_O. Thank you. This is helpful. Unfortunately I am not able to implement it for my use case. — TarJae, Dec 26 '22 at 20:10

score 3 · Accepted Answer · answered Dec 26 '22 at 22:24

It took me the whole day and as usual it was simple. So far I used this code:

  tags$img(
    src = "12092021.png",
    style = 'position: absolute; position: absolute;
      width: 1024px; height: 768px;'
  )

In contrast to usual coding where the files in www folder are directly accessed in a shiny app, within this constellation (golem framework) we have to use the www in the path:

  tags$img(
    src = "www/12092021.png",
    style = 'position: absolute; position: absolute;
      width: 1024px; height: 768px;'
  )

12092021.png lives in ..inst/app/www

Where to store background picture in a shiny app using golem framework

1 Answers1