在可反应的可扩展行中使用图像

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

我想这就是您要找的 - 您的图像是可见的超链接。我编辑了我的答案；我想我错过了您最初寻找的部分内容。

首先，您需要在您的网络链接中删除 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")) 
  })

在可反应的可扩展行中使用图像

Use image in reactable expandable row

r

reactable