Adding captions to multiple images in a shiny app - r

Question

In shiny you can add images from disk using the line below. I also found that a tag called figcaption or caption can be used to add captions to the images. But, unfortunately, I couldn't find an example on how to structure figcaption. How can I add captions right under multiple images in a shiny app? The code below stacks the captions one under the other instead of placing them under each figure respectively.
ui = navbarPage("Project Eddy", theme = shinytheme("sandstone"),
div((img(src = "Study_Area.png", height = '640px', width = '480px'),img(src = "Picture1.png", height = '640px', width = '480px'),img(src = "Picture2.png", height = '640px', width = '480px')),
div(tags$figcaption("Figure 1: Ed), tags$figcaption("Figure 2: Edd), tags$figcaption("Figure 3: Eddy")),

Answer 1

This turned out to be trickier than I expected. Looking at the spec for the <figcaption> HTML element, it needs to be the first or last element of the parent <figure> tag. Shiny's renderPlot() function doesn't wrap its image in a <figure> tag. Maybe there's a way of coercing renderPlot() to do this, but I couldn't find it. I resorted to using renderUI() and manually constructing the necessary nested tags.
Here's a working example:
library(shiny)
library(tidyverse)
ui <- fluidPage(
uiOutput("all")
)
server <- function(input, output, session) {
d1 <- tibble(x=runif(10), y=runif(10))
d2 <- tibble(x=runif(10), y=runif(10))
output$all <- renderUI({
tagList(
uiOutput("plot1"),
uiOutput("plot2")
)
})
output$plot1 <- renderUI({
tags$figure(
htmltools::plotTag(
d2 %>% ggplot() + geom_point(aes(x=x, y=y)),
alt="Plot 1"
),
tags$figcaption("This is plot 1"))
})
output$plot2 <- renderUI({
tags$figure(
htmltools::plotTag(
d2 %>% ggplot() + geom_point(aes(x=x, y=y)),
alt="Plot 2"
),
tags$figcaption("This is plot 2"))
})
}
shinyApp(ui = ui, server = server)