R Shiny - display image in UI - r

Question

I am trying to load an image from the www folder (this part works) and then using the image name to display it in the UI. When I try this I get the following error:
Warning: Error in cat: argument 1 (type 'closure') cannot be handled by 'cat'
Here is the fairly simple code
'''
library(shiny)
library(imager)
setwd("E:/CIS590-03I Practical Research Project/Project")
# ui object
ui <- fluidPage(
titlePanel(p("Dog Breed Classification", style = "color:#3474A7")),
sidebarLayout(
sidebarPanel(
fileInput("image",
"Select your image:", placeholder = "No file selected"),
tags$head(
tags$style("body .sidebar {background-color: white; }",
".well {background-color: white ;}"),
),
p("Image to categorize"),
),
mainPanel(htmlOutput("testHTML"),
)
)
)
# server()
server <- shinyServer(function(input, output) {
output$testHTML <- renderText({
paste("<b>Selected image file is: ", input$image$name, "<br>")
reactive(img(
src = input$image$name,
width = "250px", height = "190px"
))
})
})
# shinyApp()
shinyApp(ui = ui, server = server)
'''
Any help will be greatly appreciated.
Thank you,
Bill.

Answer 1

The reason you are getting the error message is because the renderText is returning a reactive function rather than the image HTML tag. reactive shouldn't appear in any render... function.
As #MrFlick has mentioned, renderText will only return a character string to the UI. An alternative for renderUI and uiOutput is renderImage and imageOutput. These will add the uploaded image to the UI in a convenient way, as the render function only requires a list of attributes to give the img tag. This also allows easy inclusion of images that aren't in the www directory.
In the solution below, I have included req to the render functions so that error messages don't appear when no image has been uploaded.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(
".sidebar {background-color: white;}",
".well {background-color: white;}",
".title-text {color: #3474A7;}"
)
),
h2(
class = "title-text",
"Dog Breed Classification"
),
sidebarLayout(
sidebarPanel(
fileInput(
"image",
"Select your image:",
placeholder = "No file selected"
),
p("Image to categorize")
),
mainPanel(
tags$p(textOutput("filename", container = tags$b)),
imageOutput("testHTML")
)
)
)
server <- function(input, output) {
output$filename <- renderText({
req(input$image)
paste("Selected image file is:", input$image$name)
})
output$testHTML <- renderImage({
req(input$image)
list(
src = input$image$datapath,
width = "250px",
height = "190px"
)
}, deleteFile = TRUE)
}
shinyApp(ui = ui, server = server)