来自URL的RenderImage且可点击 [英] RenderImage from URL and clickable

问题描述

我想弄清楚如何在Shiny中将renderImage与在线定位的图像(URL)一起使用，并使该图像可单击，以便可以将observeEvent()挂到该图像上.我可以同时做这两个事情，但不能一起做.我呈现网址的方法不适用于单击，并且允许单击的本地图像版本无法呈现URL图像.

I would like to figure out how to use renderImage in Shiny with online located images (URL), and make the image clickable, so that I can hang an observeEvent() to it. I can do both these things, but not together. My approach to render an URL doesn't work with clicking, and the local image version that allows clicking doesn't render URL images.

这是两个半工作版本:

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)

如果我输入一个URL(并删除deleteFile = FALSE)，它将显示一个空的正方形.仍然可以点击.

if I put an URL in (and remove the deleteFile = FALSE) it shows an empty square. still clickable though.

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)

显示图像，但是该图像不再可单击.

shows the image, but the image isn't clickable anymore.

如果我将 renderUI()和 uiOuput()更改为 renderImage()和 imageOutput()示例2，它将引发无效文件参数"错误.

If I change renderUI() and uiOuput() into renderImage() and imageOutput() in example 2, it throws a 'invalid file argument' error.

我也尝试过另一个SO帖子中的此版本，但同样，不可点击.此方法基于此链接上的答案

I also tried this version that was in the other SO post, but again, not clickable. This approach is based on the answer on this link

 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)

我想远离本地图像，因为一旦我们发布了Shiny App，这似乎更有意义.因此，确实需要一种允许呈现URL图像并使它们可单击的解决方案.如果有人可以解释为什么 click = 仅适用于带imageOutput的本地文件的好处，则有加分.

I want to move away from local images because that seems to make more sense once we publish the Shiny App. So therefore really in need of a solution that allows rendering of URL images and have them being clickable. Bonus points if somebody can explain why the click = only works local files with imageOutput.

推荐答案

一种替代方法是使用 shinyjs 库中的 onclick 函数.它允许您将点击事件包括到特定的html元素(以id为目标).

One alternative is to use the onclick function from shinyjs library. It allows you to include click events to specific html elements (targeted by id).

此处是文档

在您的情况下，代码如下所示:

In your case the code would look like this:

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)

这篇关于来自URL的RenderImage且可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！