如何实现DataTable中点击单元格图片弹出大图效果？

我帮你调整并完善了代码，实现点击小图弹出大图的功能，直接运行下面的完整代码就能看到效果：

library(shiny)
library(DT)

# 构造包含图片的数据，修正了图片URL并统一格式
dat <- data.frame(
  country = c('USA', 'China'),
  flag = c(
    '<img src="http://bpic.588ku.com/element_origin_min_pic/16/11/14/2f4de8bcf22409518c2fe2d74a49d9c7.jpg" height="52" class="flag-img"></img>',
    '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/1280px-Flag_of_the_People%27s_Republic_of_China.svg.png" height="52" class="flag-img"></img>'
  ),
  stringsAsFactors = FALSE
)

ui <- fluidPage(
  DTOutput("flag_table")
)

server <- function(input, output, session) {
  output$flag_table <- renderDT({
    datatable(
      dat,
      escape = FALSE,  # 必须设置为FALSE，否则HTML标签会被转义显示
      callback = JS("
        // 给所有带flag-img类的图片绑定点击事件
        $('.flag-img').on('click', function() {
          var imgSrc = $(this).attr('src');
          // 调用Shiny的modal显示大图
          Shiny.setInputValue('show_img_modal', imgSrc, {priority: 'event'});
        });
      ")
    )
  })
  
  # 监听modal触发信号，弹出大图模态框
  observeEvent(input$show_img_modal, {
    showModal(modalDialog(
      tags$img(src = input$show_img_modal, style = "max-width: 100%; max-height: 80vh;"),
      title = "大图预览",
      easyClose = TRUE,
      footer = NULL
    ))
  })
}

shinyApp(ui, server)

关键要点说明： #

• escape = FALSE：这是必须的，否则DT会把<img>标签当成普通文本显示，而不是渲染成图片。
• 给图片加class：我给所有图片加了flag-img类，方便JS精准选择要绑定点击事件的元素，避免误触发其他图片。
• JS回调+Shiny通信：通过Shiny.setInputValue把点击的图片地址传给Shiny服务器端，再用observeEvent监听这个信号，弹出模态框显示大图。
• 模态框适配：设置图片的max-width和max-height，保证大图在不同屏幕尺寸下都能正常显示，不会超出窗口范围。

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