r - 在可响应的可扩展行中使用图像

Question

给定一个带有一列图像链接的数据框( <img src...> )，是否可以使用 reactable的可扩展行功能可以展开一行并查看图像吗？
以下是一些基本数据:

library(tidyverse)
library(reachable)

img_df <- tribble(~image,
                  "<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Kosaciec_szczecinkowaty_Iris_setosa.jpg/450px-Kosaciec_szczecinkowaty_Iris_setosa.jpg'/>",
        "<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Iris_versicolor_3.jpg/320px-Iris_versicolor_3.jpg'/>",
        "<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Iris_virginica.jpg/295px-Iris_virginica.jpg'/>"
)

iris %>%
  group_by(Species) %>%
  summarize(mean = mean(Sepal.Length)) %>%
  add_column(img_df) -> df

reactable(df)

因此，与其显示“图像”列，不如将其显示为可扩展列，并在行展开时显示图像。
我可以使用此代码显示 HTML，但图像本身不会:

reactable(df,
          columns = list(
            image = colDef(html = TRUE,
                           resizable = TRUE,
                           show=F)
          ),
          details = function(index) {
            if(df$image[index] != "") {
              htmltools::HTML(df$image[index])
            }
          })

我可以使用此代码显示图像，但它带有所有附加行信息。 (这是取自文档 [https://glin.github.io/reactable/articles/examples.html#expandable-row-details-1]

reactable(df, details = colDef(
  name = "More",
  details = JS("function(rowInfo) {
    return 'Details for row: ' + rowInfo.index +
      '<pre>' + JSON.stringify(rowInfo.row, null, 3) + '</pre>'
  }"),
  html = TRUE,
  width = 60
))

Answer 1

我认为这就是您要寻找的 - 您的图像是可见的超链接。我编辑了我的答案；我想我错过了您最初寻找的部分内容。
首先，您需要删除 Web 链接中的 HTML 标记。符号正在转换(即， < 到 < ， > 到 > 等)。相反，使用包 htmltools添加标签。
我坚持使用您的原始代码，并为我更改的内容添加了注释。
一探究竟 - :

library(tidyverse)
library(reactable)
library(htmltools)

#---------------- removed the tags in the data frame ----------------
img_df <- tribble(~image,
                  "https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Kosaciec_szczecinkowaty_Iris_setosa.jpg/450px-Kosaciec_szczecinkowaty_Iris_setosa.jpg",
                  "https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Iris_versicolor_3.jpg/320px-Iris_versicolor_3.jpg",
                  "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Iris_virginica.jpg/295px-Iris_virginica.jpg"
)

#---------------- this is unchanged ----------------
iris %>%
  group_by(Species) %>%
  summarize(mean = mean(Sepal.Length)) %>%
  add_column(img_df) -> df

#-------------------- your table --------------------
reactable(df, columns = list(
  image = colDef(show = F,
                 resizable = T,
                 html = T)),
  details = function(index) {  
    # essentially <a><img /></a>
    htmltools::tags$a(href = df[index,]$image, 
                      target = "_blank", 
                      htmltools::tags$img(src = df[index,]$image, 
                                          width = "100", 
                                          height = "100")) 
  })