How to display images retrieved from MySQL in R Shiny?

Question

I get data from an android app which allows users to take pictures and upload it to a server.
The image is stored in MySQL in JPEG format.
I get the following data for every image...

data:image/jpeg;base64,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

When I render it in shiny,I get only the blank template for each line whereas the pic is not getting loaded.
I am not sure if I should remove the initial tag

data:image/jpeg;base64,

to get only the picture...but not sure if it will help.

My current code to render the images in inside renderUI is as follows:

title = HTML(paste0("<div class='image-wrap'><img src='./images/",
                                                 ps()$img[ps()$image_path == i],
                                                "'class=fixed-height'",
                                                ps()$img[ps()$image_path == i],
                                                "'></div>" 

                             ))

The same code works well when I render locally stored jpeg images.

This is the first time I am working with images, I am not sure if the given details are sufficient enough.

score 1 · Accepted Answer · answered Sep 29 '16 at 07:11

I'm not sure if this is what you want, but if you just want to output the given encoded image to the webpage, then you can simply use that base64 string as the src attribute of an <img> tag. Here's an example to get your started:

library(shiny)

imageData <- "data:image/jpeg;base64,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"

ui <- fluidPage(
  tags$img(src = imageData)
)

server <- function(input, output, session) {

}

shinyApp(ui = ui, server = server)

is it this simple? :-) Thank you. – Apricot Sep 29 '16 at 07:23 — Apricot, Sep 29 '16 at 07:23

How to display images retrieved from MySQL in R Shiny?

1 Answers1

Linked