opt_interactive()与gt_img_rows()冲突求助：保留图片并实现交互式排序

问题背景 #

使用gt结合gtExtras::gt_img_rows()可以正常渲染图片列，但添加opt_interactive()开启交互式排序功能后，图片列会退化为原始URL文本，无法同时保留图片显示和交互式特性。

解决方案 #

由于opt_interactive()会重置列的渲染规则，我们需要通过自定义HTML渲染+指定交互式列渲染逻辑的方式来解决：

• 直接构造包含图片的HTML代码，替代gt_img_rows()的处理；
• 用fmt_markdown()让gt识别HTML内容；
• 在opt_interactive()中通过column_defs参数告诉交互式表格直接渲染该列的HTML内容。

完整可运行代码 #

library(gt)
library(DT)

# 构造数据时直接生成图片的HTML标签
data.frame(
  Animal = c("Cat", "Dog"),
  URL = c(
    "<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Cat_August_2010-4.jpg/1200px-Cat_August_2010-4.jpg' height='50'>",
    "<img src='https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*' height='50'>"
  )
) %>%
  gt() %>%
  fmt_markdown(columns = URL) %>% # 解析HTML内容
  opt_interactive(
    column_defs = list(
      list(
        targets = "URL",
        render = DT::JS("function(data) { return data; }") # 确保交互式表格渲染HTML
      )
    )
  )

补充说明 #

• 可通过修改<img>标签的height/width属性调整图片尺寸；
• 必须加载DT包，因为opt_interactive()依赖DT的JavaScript渲染逻辑；
• 这种方法本质是绕过gt_img_rows()的封装，直接控制列的渲染输出，避免与交互式功能的冲突。

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