使用 R、Shiny、DT 和 DBI 返回查询结果后嵌入图像

Question

我正在 R Shiny 中创建一个数据 Table，它由从 SSMS 中的 table 中提取的 SELECT 语句填充。其中一列 return 是位于 R 从中提取的 www 文件夹中的图像文本。例如，如果我的查询是：

SELECT Fruit, Image, Description
FROM tblFruit

在SQL中可能return是这样的：

Fruit  |  Image      |  Description
-----------------------------------
apple  |  apple.png  |  red apple
orange |  orange.png |  orange orange
banana |  banana.png |  yellow banana

R 中的我的数据 Table 与此类似，但我的目标是将文本 "apple.png" 替换为 www 文件夹中的实际图像。这可能吗？

这是我的 app.R 的模拟 up/snippet 样子：

library(dplyr)
library(DBI)
library(plotly)
library(shiny)
library(shinydashboard)
library(RJDBC)
library(readxl)
library(DT)
library(htmltools)
library(shinyBS)

conn <- dbConnect(drv, "jdbc:sqlserver://SQLServer;databaseName=DEV", Sys.getenv("userid"), Sys.getenv("pwd"))

sqlSelect = trimws("SELECT Fruit, Image, Description FROM tblFruit ")
sqlWhere = "WHERE Fruit in ('Apple','Orange','Banana')"

body <- dashboardBody(class="text-center",
                        tabItem("fruit", class ="text-center",
                                fluidRow(
                                  tabBox(title = "Fruit", id = "FruitID",
                                         tabPanel(title = 'Fruit',
                                                  fluidRow(
                                                    box(width=12,
                                                        div(DT::dataTableOutput(outputId = "DT_Fruit"), style="font-size:125%", class ="text-left")
                                                    )
                                                  )
                                         )
                                  ) # tabBox
                                ) # fluidRow
                        ) # tabItem fruit
                      ) # tabItems
) # body

server <- function(input, output){
    output$DT_Fruit <- DT::renderDataTable({
      DT::datatable(options = list(dom = 't'), rowname = FALSE, dbGetQuery(conn, paste(sqlSelect, sqlWhere)))
    })
}

编辑：根据此处的第一条评论，我在读取 www 文件夹时没有遇到问题。我想用 www 文件夹中名为 apple.png 的图像替换查询中的文本（例如 "apple.png"）return。我或多或少正在寻找 direction/advice 如何最好地解决这个问题。

Answer 1

如果这是你的问题，你在 DT table 中显示图像似乎仍然有问题。

使用glue::glue()或paste0()将apple.png转换为HTML中的img标签，并设置escapse = FALSE以便DT解析它作为 HTML.

请参阅下面的示例，只需将 src 中的值替换为您的图片路径即可。

library(DT)
DT::datatable(
    data.frame(
        images = c(
            "<img src='https://images-na.ssl-images-amazon.com/images/I/81xQBb5jRzL._SY355_.jpg' alt='apple.jpg' width='100px'>",
            "<img src='https://images-na.ssl-images-amazon.com/images/I/71gI-IUNUkL._SL1500_.jpg' alt='banana.jpg' width='100px'>"
        )
    ),escape = FALSE
)

Answer 2

你能试试这个吗:

render <- c(
  "function(data, type, row, meta) {",
  "  if(type === 'display'){",
  "    var img = '<img src= \"' + data + '\">';",
  "    return img;",
  "  }else{",
  "    return data;",
  "  }",
  "}"
)

并在 server 中：

output$DT_Fruit <- renderDT({
  datatable(
    dbGetQuery(conn, paste(sqlSelect, sqlWhere)), 
    rownames = FALSE, 
    options = list(
      dom = "t",
      columnDefs = list(
        list(targets = 1, render = JS(render))
      )
    )
  )
})

使用 R、Shiny、DT 和 DBI 返回查询结果后嵌入图像

Embed images after query results are returned using R, Shiny, DT and DBI

r

image

shiny

dbi

dt