Embedding an image with shinymanager R

问题

I have a shiny app where i am using shinymanager package to handle user authentication. I am trying to add a picture from my www/ folder as the authentication background. Here is a working example.

When you run the app you will currently see the "R" logo in the background. I have a image called "pabackground.png" in my www/ folder. Here is what the current structure of my shiny app looks like.

| shinyApp/
    | ui.R
    | server.R
    | www/
       | pabackground.png

I have tried a few ideas like url('www/pabackground') and img(src = 'www/pabackground') with no luck. Thanks for your help.

Application Code

if (interactive()) {
  
  library(shiny)
  library(shinymanager)
  
 
  credentials <- data.frame(
    user = c("fanny", "victor"),
    password = c(scrypt::hashPassword("azerty"), scrypt::hashPassword("12345")),
    is_hashed_password = TRUE,
    comment = c("alsace", "auvergne"),
    stringsAsFactors = FALSE
  )
  
  # app
  ui <- fluidPage(
    
    # authentication module
    auth_ui(
      id = "auth",
      tags_top = 
        tags$div(
          tags$h4("Demo", style = "align:center"),
          tags$img(
            #i would like to change this picture to a picture from my www/ folder
            src = "https://www.r-project.org/logo/Rlogo.png", width = 100
        )
      ),
    
      tags_bottom = tags$div(
        tags$p(
          "For any question, please  contact ",
          tags$a(
            href = "mailto:someone@example.com?Subject=Shiny%20aManager",
            target="_top", "administrator"
          )
        )
      ),
      # change auth ui background ?
      # https://developer.mozilla.org/fr/docs/Web/CSS/background
      background  = "linear-gradient(rgba(0, 0, 255, 0.5),
                       rgba(255, 255, 0, 0.5)),
                       url('https://www.r-project.org/logo/Rlogo.png');", 
      choose_language = TRUE
    ),
    
    # result of authentication
    verbatimTextOutput(outputId = "res_auth"),
    
    # classic app
    headerPanel('Iris k-means clustering'),
    sidebarPanel(
      selectInput('xcol', 'X Variable', names(iris)),
      selectInput('ycol', 'Y Variable', names(iris),
                  selected=names(iris)[[2]]),
      numericInput('clusters', 'Cluster count', 3,
                   min = 1, max = 9)
    ),
    mainPanel(
      plotOutput('plot1')
    )
  )
  
  server <- function(input, output, session) {
    
    # authentication module
    auth <- callModule(
      module = auth_server,
      id = "auth",
      check_credentials = check_credentials(credentials)
    )
    
    output$res_auth <- renderPrint({
      reactiveValuesToList(auth)
    })
    
    # classic app
    selectedData <- reactive({
      
      req(auth$result)  # <---- dependency on authentication result
      
      iris[, c(input$xcol, input$ycol)]
    })
    
    clusters <- reactive({
      kmeans(selectedData(), input$clusters)
    })
    
    output$plot1 <- renderPlot({
      palette(c("#E41A1C", "#377EB8", "#4DAF4A", "#984EA3",
                "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999"))
      
      par(mar = c(5.1, 4.1, 0, 1))
      plot(selectedData(),
           col = clusters()$cluster,
           pch = 20, cex = 3)
      points(clusters()$centers, pch = 4, cex = 4, lwd = 4)
    })
  }
  
  shinyApp(ui, server)
  
}

回答1:

If the image is available in the www folder using addResourcePath is unnecessary. The prefix for the www folder is "/". Please see this.

Accordingly the following should be sufficent:

tags$img(
          src = "/pabackground.png", width = 100
        )

回答2:

As @ismisehregal pointed out, you don't have to use addResourcePath when pictures are in www subfolder of the app.

In case they're in another subfolder then you have to use addResourcePath to allow shiny to serve them.

For example if your picture is in "pics" subfolder of your app and you want to serve it in "logo" sub-url:

addResourcePath(prefix = "logo", directoryPath = "pics")

...

ui <- fluidPage(
  
  # authentication module
  auth_ui(
    id = "auth",
    tags_top = 
      tags$div(
        tags$h4("Demo", style = "align:center"),
        tags$img(
          src = "logo/pabackground.png", width = 100
        )
      ),
...

来源：https://stackoverflow.com/questions/64671900/embedding-an-image-with-shinymanager-r