RenderImage à partir d'une URL et cliquable

Question

J'aimerais comprendre comment utiliser renderImage dans Shiny avec des images localisées en ligne (URL), et rendre l'image cliquable, de sorte que je puisse y accrocher un observeEvent(). Je peux faire ces deux choses, mais pas ensemble. Mon approche pour rendre une URL ne fonctionne pas avec le clic, et la version de l'image locale qui permet de cliquer ne rend pas les images URL.

Voici les deux versions à moitié fonctionnelles : Je me suis inspiré de ici pour le

Cliquez sur

library(shiny)

ui <- fluidPage(
        imageOutput("image1", click = "MyImage")
  )

server <- function(input, output, session) {
  setwd(Set the directory of the image in here)    #### modify to test
  output$image1 <- renderImage({
    list(
      src = "YOUR_IMAGE.png",                     #### modify to test
      contentType = "image/png",
      width = 90,
      height = 78,
      alt = "This is alternate text"
    )}, deleteFile = FALSE)
  observeEvent(input$MyImage, { print("Hey there")})
}
shinyApp(ui, server)

Si j'insère une URL (et que j'enlève le paramètre deleteFile = FALSE), un carré vide apparaît, mais on peut toujours cliquer dessus.

On peut utiliser l'URL en utilisant renderUI()

library(shiny)

ui <- fluidPage(
           uiOutput("image1", click = "MyImage")
  )

server <- function(input, output, session) {
  setwd(AppDir)

  output$image1<- renderUI({
    imgurl2 <- "https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png"
    tags$img(src=imgurl2, width = 200, height = 100)
  })
 observeEvent(input$MyImage, { print("Hey there")})
}
shinyApp(ui, server)

montre l'image, mais l'image n'est plus cliquable.

Si je change renderUI() y uiOuput() sur renderImage() y imageOutput() dans l'exemple 2, une erreur de type "argument de fichier non valide" apparaît.

htmlOuput avec renderText

J'ai également essayé cette version qui se trouvait dans l'autre post de SO, mais là encore, pas de clic. Cette approche est basée sur la réponse à cette lien

 library(shiny)

  ui <- fluidPage(
    htmlOutput("image1", click = "MyImage")
  )

  server <- function(input, output, session) {
    setwd(AppDir)
    imgurl2 <- "https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png"

    output$image1<- renderText({c('<img src="',imgurl2,'">')})

    observeEvent(input$MyImage, { print("Hey there")})
  }
  shinyApp(ui, server)

Je veux m'éloigner des images locales car cela semble avoir plus de sens une fois que nous aurons publié l'application Shiny. J'ai donc vraiment besoin d'une solution qui permette de rendre des images URL et de les rendre cliquables. Des points bonus si quelqu'un peut expliquer pourquoi le click = ne fonctionne que pour les fichiers locaux avec imageOutput.

Answer 1

Qu'en est-il de la transformation d'une image de l'url en un ggplot comme :

library(magick)
library(cowplot)
library(gtools)
library(shiny)

ui <- fluidPage(
  uiOutput("myplotoutput"),
  uiOutput("text")  
)

server <- function(input, output, session) {
  output$myplotoutput = renderUI( {
    plotOutput("urlimage", click=clickOpts(id="myclick") )
}  )

output$text=renderUI({
    validate(
      need(try(!invalid(input$myclick)), "Text will appear here")
    )
    textOutput("reactext")
})

output$reactext<-renderText(mytext$texto)

output$urlimage<- renderPlot({
g<-  ggdraw() +   draw_image("https://jeroen.github.io/images/frink.png")
g
})

mytext<-reactiveValues()  

observeEvent(input$myclick, {
    mytext$texto<-"Hey there"
})
} 

shinyApp(ui, server)

Answer 2

Une alternative est d'utiliser le onclick de la fonction shinyjs bibliothèque. Elle vous permet d'inclure des événements de clic à des éléments html spécifiques (ciblés par id).

Voici la documentation

Dans votre cas, le code ressemblerait à ceci :

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  uiOutput("image1", click = "MyImage")
)

server <- function(input, output, session) {

  output$image1<- renderUI({
    imgurl2 <- "https://www.rstudio.com/wp-content/uploads/2014/07/RStudio-Logo-Blue-Gradient.png"

    div(id = "myImage",
      tags$img(src = imgurl2, width = 200, height = 100)
    )
  })
  onclick(
    myImage, 
    { 
      # Do whatever you want!
      print("Hey there")
    }
  )
}

shinyApp(ui, server)