在 R Shiny 中渲染 DT table 中的图像

Question

我正在制作一个 R Shiny 网页，该网页使用包含许多列的 DT table，其中第一列是图像。目前，我找到了两种不同的方法来显示这些图像，想知道是否还有其他方法，因为这两种方法都不符合我的需要。

方法 1 - 指向现有的 Web 托管 iamge

首先，在用于构建遵循此格式的 table 的数据框中有一列：

<img src='URL_TO_IMG.png' height='200'></img>

其中 URL_TO_IMG.png 链接到预先存在的、已经托管的网络图像。

方法 2 - 将图像文件编码为数据 URI

另一种是使用本地下载图像，而不是使用以下方法：

<img src='RESULTS_OF_KNITR_IMAGE_URI' height='200'></img>

其中 RESULTS_OF_KNITR_IMAGE_URI 是 knitr::image_uri(x) 函数调用的结果，其中 x 是我本地图像的路径。来自 knitr 文档这个函数：

...can encode an image file as a base64 string, which can be used in the img tag in HTML.

调查结果：

方法 1 效果很好，但问题是我想 post 将网络托管图像处理成更小的尺寸。有时它们会非常大并且需要很长时间才能加载，而我实际上最多只需要 200 像素宽度的图像。另外，我想更好地控制图像文件的位置。

METHOD 2 的数据 URI 方法允许我在本地预处理图像以很好地适应列并且更小。但是，由于我有 200 多张图片，这会导致应用程序加载时间超过 10 秒，因为我相信应用程序会以这种方式一次加载所有图片。

我想我可能想在图像托管网站上托管我的 post 处理过的图像并指向 URL 就像方法 1 但我不确定。有什么建议吗？

如果有人想玩我的设置，我做了一个 minimum working example:

library(shiny)
library(DT)

# read in CSV with table information
my_image_df = read.csv('image_test_case_table.csv')

# Define UI
ui <- fluidPage(
  fluidRow(
    DTOutput("my_table", width = "100%")
  )
)

# Define server
server <- function(input, output) {
  output$my_table = DT::renderDataTable(
    DT::datatable(
      {data <- my_image_df},
      escape = FALSE,
      rownames = FALSE,
      options = list(columnDefs = list(list(className = 'dt-center', targets = 0))),
      selection = 'single'
    )#datatable
  )#renderDataTable
}

# Run the application
shinyApp(ui = ui, server = server)

有什么想法吗？

Answer 1

在 Shiny 文档中有点隐藏，您会发现方法 3 涉及在 www 目录中提供图像文件（示例参考 here or in the cheatsheet）。

如果您的文件夹结构如下所示

├── image_test_case.R
├── image_test_case_table.csv
├── www/
│   ├── amerikaan.jpg
│   └── tilia.jpg

那么您可以将 src 标签设置为相对于 www 路径的图像路径。

<img src='amerikaan.jpg' height='200'></img>
<img src='tilia.jpg' height='200'></img>

请注意，www 用于各种静态资源（最常见的图像，javascript 和 css 文件）。

在 R Shiny 中渲染 DT table 中的图像

Rendering images in DT table in R Shiny

r

shiny

dt