R 从动态数据表中的一行渲染多个图像

交叉张贴在

我是Shiny的新手，一直在尝试创建一个简单的数据表，在对不同的列进行过滤时，该表将返回过滤结果的图像（这些图像在列“frontimage”和“sideimage”中引用），并假设www文件夹中有同名的文件（但复制以下代码时不需要图像）

虽然这样做是可行的，但我真正想要的是让每一行中的图片彼此并列显示（“frontimage”及其关联的“sideimage”）。目前，我唯一能弄清楚如何使这两列图片都渲染的方法是将每一列图片分配给单独的输出，但这意味着您将获得“frontimage”结果的所有图片，然后在所有“sideimage”结果之后，这并不理想

总的来说，可能有更好的方法来做到这一点，所以如果有人有建议，我很高兴听到他们

可复制代码

library(DT)
library(shiny)

dat <- data.frame(
  type = c("car", "truck", "scooter", "bike"),
  frontimage = c("carf.jpg", "truckf.jpg", "scooterf.jpg", "bikef"),
  sideimage = c("cars.jpg", "trucks.jpg", "scooters.jpg", "bikes")
)

# ----UI----
ui <- fluidPage(
  titlePanel("Display two images for each row"),
  
  mainPanel(
    DTOutput("table"),
    uiOutput("img1"),
    uiOutput("img2")
  )
)

# ----Server----
server = function(input, output, session){

  # Data table with filtering
  output$table = DT::renderDT({
    datatable(dat, filter = list(position = "top", clear = FALSE), 
              selection = list(target = 'row'),
              options = list(
                autowidth = TRUE,
                pageLength = 2,
                lengthMenu = c(2, 4)
              ))
  })
  
  # Reactive call that only renders images for selected rows 
  df <- reactive({
    dat[input[["table_rows_selected"]], ]
  })
  
  # Front image output
  output$img1 = renderUI({
    imgfr <- lapply(df()$frontimage, function(file){
      tags$div(
        tags$img(src=file, width="100%", height="100%"),
        tags$script(src="titlescript.js")
      )
      
    })
    do.call(tagList, imgfr)
  })
  
  # Side image output
  output$img2 = renderUI({
    imgside <- lapply(df()$sideimage, function(file){
      tags$div(
        tags$img(src=file, width="100%", height="100%"),
        tags$script(src="titlescript.js")
      )
      
    })
    do.call(tagList, imgside)
  })
  
}
# ----APP----    
# Run the application 
shinyApp(ui, server)

---

您可以使用

列

功能拆分布局。 有关更多信息，请参阅。 您可能希望删除代码以生成虚拟图像，但是我希望这个答案是可复制的

以下是我认为你想要的：

library(DT)
library(shiny)

# generate dummy images
imgNames = c("carf.jpg", "truckf.jpg", "scooterf.jpg", "bikef.jpg", "cars.jpg", "trucks.jpg", "scooters.jpg", "bikes.jpg")

if(!dir.exists("www")){
  dir.create("www")
}

for(imgName in imgNames){
  png(file = paste0("www/", imgName), bg = "lightgreen")
  par(mar = c(0,0,0,0))
  plot(c(0, 1), c(0, 1), ann = F, bty = 'n', type = 'n', xaxt = 'n', yaxt = 'n')
  text(x = 0.5, y = 0.5, imgName, 
       cex = 1.6, col = "black")
  dev.off()
}

dat <- data.frame(
  type = c("car", "truck", "scooter", "bike"),
  frontimage = c("carf.jpg", "truckf.jpg", "scooterf.jpg", "bikef.jpg"),
  sideimage = c("cars.jpg", "trucks.jpg", "scooters.jpg", "bikes.jpg")
)

# ----UI----
ui <- fluidPage(
  titlePanel("Display two images for each row"),
  
  mainPanel(
    DTOutput("table"),
    fluidRow(
      column(6, uiOutput("img1")),
      column(6, uiOutput("img2"))
    )
  )
)

# ----Server----
server = function(input, output, session){
  
  # Data table with filtering
  output$table = DT::renderDT({
    datatable(dat, filter = list(position = "top", clear = FALSE), 
              selection = list(target = 'row'),
              options = list(
                autowidth = TRUE,
                pageLength = 2,
                lengthMenu = c(2, 4)
              ))
  })
  
  # Reactive call that only renders images for selected rows 
  df <- reactive({
    dat[input[["table_rows_selected"]], ]
  })
  
  # Front image output
  output$img1 = renderUI({
    imgfr <- lapply(df()$frontimage, function(file){
      tags$div(
        tags$img(src=file, width="100%", height="100%"),
        tags$script(src="titlescript.js")
      )
    })
    do.call(tagList, imgfr)
  })
  
  # Side image output
  output$img2 = renderUI({
    imgside <- lapply(df()$sideimage, function(file){
      tags$div(
        tags$img(src=file, width="100%", height="100%"),
        tags$script(src="titlescript.js")
      )
    })
    do.call(tagList, imgside)
  })
  
}
# ----APP----    
# Run the application 
shinyApp(ui, server)

库（DT）
图书馆（闪亮）
#生成虚拟图像
imgNames=c（“carf.jpg”、“truckf.jpg”、“scooterf.jpg”、“bikef.jpg”、“cars.jpg”、“trucks.jpg”、“scooters.jpg”、“bikes.jpg”）
如果（！dir.存在（“www”））{
创建目录（“www”）
}
for（imgName中的imgName）{
png（file=paste0（“www/”，imgName），bg=“lightgreen”）
par（mar=c（0,0,0,0））
图（c（0，1），c（0，1），ann=F，bty=n，type=n，xaxt=n，yaxt=n）
文本（x=0.5，y=0.5，imgName，
cex=1.6，col=“黑色”）
发展主任（）
}
我不明白。您的意思是希望“侧图像”位于“frontimage”的右侧吗？理想情况下，我希望找到一种方法，让它同时呈现datatable中每一行的前图像和侧图像，而不是所有选定列的所有前图像，然后是所有侧图像。选择的数据越多，这一点就越明显。例如，您可以将[carf.jpg][cars.jpg][truckf.jpg][trucks.jpg][trucks.jpg]作为输出……是的，这就是我想要的想法！我不认为这是一个格式问题。谢谢你的洞察力。
library(DT)
library(shiny)

# generate dummy images
imgNames = c("carf.jpg", "truckf.jpg", "scooterf.jpg", "bikef.jpg", "cars.jpg", "trucks.jpg", "scooters.jpg", "bikes.jpg")

if(!dir.exists("www")){
  dir.create("www")
}

for(imgName in imgNames){
  png(file = paste0("www/", imgName), bg = "lightgreen")
  par(mar = c(0,0,0,0))
  plot(c(0, 1), c(0, 1), ann = F, bty = 'n', type = 'n', xaxt = 'n', yaxt = 'n')
  text(x = 0.5, y = 0.5, imgName, 
       cex = 1.6, col = "black")
  dev.off()
}

dat <- data.frame(
  type = c("car", "truck", "scooter", "bike"),
  frontimage = c("carf.jpg", "truckf.jpg", "scooterf.jpg", "bikef.jpg"),
  sideimage = c("cars.jpg", "trucks.jpg", "scooters.jpg", "bikes.jpg")
)

# ----UI----
ui <- fluidPage(
  titlePanel("Display two images for each row"),
  
  mainPanel(
    DTOutput("table"),
    fluidRow(
      column(6, uiOutput("img1")),
      column(6, uiOutput("img2"))
    )
  )
)

# ----Server----
server = function(input, output, session){
  
  # Data table with filtering
  output$table = DT::renderDT({
    datatable(dat, filter = list(position = "top", clear = FALSE), 
              selection = list(target = 'row'),
              options = list(
                autowidth = TRUE,
                pageLength = 2,
                lengthMenu = c(2, 4)
              ))
  })
  
  # Reactive call that only renders images for selected rows 
  df <- reactive({
    dat[input[["table_rows_selected"]], ]
  })
  
  # Front image output
  output$img1 = renderUI({
    imgfr <- lapply(df()$frontimage, function(file){
      tags$div(
        tags$img(src=file, width="100%", height="100%"),
        tags$script(src="titlescript.js")
      )
    })
    do.call(tagList, imgfr)
  })
  
  # Side image output
  output$img2 = renderUI({
    imgside <- lapply(df()$sideimage, function(file){
      tags$div(
        tags$img(src=file, width="100%", height="100%"),
        tags$script(src="titlescript.js")
      )
    })
    do.call(tagList, imgside)
  })
  
}
# ----APP----    
# Run the application 
shinyApp(ui, server)