R Shiny - display image in UI-CodePudding

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.

CodePudding user response：

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)