在R Shiny中的DT表格中呈现图像

Question

我正在制作一个使用DT表格的R Shiny网页，其中有许多列，第一列是一张图片。目前，我已经找到了两种不同的方法来显示这些图片，并想知道是否还有其他方法，因为这两种方法都不符合我的需求。

方法1 - 指向已存在的网络图片

第一种方法是，在用于构建以下表格的数据框中添加一个列，其格式如下：

<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文档中可以得知此函数：

...可以将图像文件编码为base64字符串，在HTML的img标签中使用。

发现：

方法1很好用，但存在一个问题，我想将网络托管的图像进行后处理，使其尺寸更小。有时它们会非常大，加载时间很长，而我只需要200像素宽度的图像，最多不超过200像素。此外，我希望能更好地控制图像文件的位置。

方法2的数据URI方法允许我在本地预处理图像，使其适合列并且更小。然而，由于我有200多张图片，这会导致应用程序加载所有图片需要10秒以上的时间。

我正在考虑将我的后处理图像托管在图像托管站点上，并像方法1那样指向URL，但我不确定。有什么建议吗？

如果有人想要使用我的设置进行操作，我制作了一个最小工作示例:

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)

任何想法？

- Sooji

---

你可能想考虑研究一下在R Shiny中的缓存。我知道很多人使用免费的imgur来存储他们的图片，因为这样网页的URL加载速度会更快。 - Daniel_j_iii

你是否尝试过将图片放入www文件夹中，并通过路径加载它们，而不是将图像URI粘贴到src =“…”中？（例如，如果一个图像名为www/tilia.jpg，则使用src="tilia.jpg"指定其路径） - Felix Jassler

@FelixJassler，这正是我所希望的！我不知道使用www目录--学到了新东西！谢谢。如果你把它写成答案，我会给你信用。同时向DanielJachetta致敬--感谢您的贡献。我以前没有学过在R中进行缓存。 - Sooji

@Sooji 我之前不知道knitr::image_uri(x)，所以这对我来说也是新的发现 :) - Felix Jassler

Answer 1

在 Shiny 文档中，你会发现一些关于 METHOD 3 的内容，它涉及将图片文件放置在 www 目录中（示例参考可在 这里 或 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文件）。

- Felix Jassler