R Shiny如何实现点击图片在新浏览器标签页打开指定链接

核心实现思路 #

不需要额外编写复杂的JavaScript逻辑，直接利用Shiny内置的超链接标签a()包裹图片标签即可，只要给超链接标签加上target = "_blank"参数，就能实现点击后自动打开新浏览器标签页跳转的效果，完全不影响原有图片的样式和布局。

修改后的可直接复用代码 #

将原有代码中的img()标签嵌套进对应a()标签内，替换成你自己需要的跳转地址即可：

shinyUI(fluidPage(
  useShinyjs(),
  div(
    div(
      div(
        # 第一张图绑定跳转链接
        a(
          href = "https://en.wikipedia.org/wiki/Main_Page", # 替换为第一张图的目标地址
          target = "_blank",
          img(src="img_1.png", filetype="image/png", height="40px", width="120px", style="float: left; cursor: pointer;")
        )
      ),
      div(
        # 第二张图绑定跳转链接
        a(
          href = "替换为第二张图对应的目标跳转地址",
          target = "_blank",
          img(src="img_2.png", filetype="image/png", height="40px", width="80px", style="float: right; cursor: pointer;")
        )
      ),
      style='display: inline-block; width: 100%;'
    ),
    # rest of code
  )
  # rest of code
))

注意事项 #

• target = "_blank"是核心必填参数，缺失该参数时链接会在当前Shiny应用所在标签页直接跳转，打断用户操作
• 代码里给img标签额外加了cursor: pointer;样式，实现鼠标悬停在图片上时显示手型光标，提示用户该元素可点击，不需要的话可以直接删掉
• 原有图片的宽高、浮动布局等样式完全保留，不会改动页面原有显示效果

内容的提问来源于stack exchange，提问作者LJG