Wie Bilder aus MySQL in R Shiny angezeigt werden?

Question

Ich erhalte Daten von einer Android-App, mit der Benutzer Bilder aufnehmen und auf einen Server hochladen können.
Das Bild wird in MySQL im JPEG-Format gespeichert.
Ich erhalte die folgenden Daten für jedes Bild ...

Daten: image/jpeg; base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCABkAGQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4 + Tl5ufo6erx8vP09fb3 + Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1 dbX2Nna4uPk5ebn6Onq8vP09fb3 + Pn6/9oADAMBAAIRAxEAPwDl4LJZyo8zYWfbjjPbnr7/AOecIbbygZFkZcDq3yk/TBOR70kMMjAOjqPn2jMoBB/E9PemTr5L7GwSePlYH9RxTJJPsT5Yb + jbQQpIORkc + lRFpEVoMjGckbR1 + tPijmO4x7jyF + Xvnt + lNdGjYow2sMghhyKmzuPSw1VJVjkcDP64/rSA4OV6 + 1KMjP68U + S3mi3eZG6Y4O5SMHrTAmtjeS7vKmcbSM5kIHP/AOqnNeXtvKY2ncOOxOapb5Q + 6NtuOhBoZpWYPIS/HUmiyDU01vNTC7yGdMbs + WCMfWkXVroggRowAycA9PzrPFxOImiwNh7bRSQzPAQ6D5weOOlLlQXZdh1OWB90YCAnLIPun/Ctm3vlnj3iVAB94PgYrnJ7qS5K + aMFRjOSc/nUZyVI70nG40zpf7SgBIMqHHoporl8 + h/Wip5B8xY4JynA9DUdxkbSx6GpopTA5I2kg9GQMPyNRXT + YN3HXJwMD8q1IQ7jPy8gY/OmyZ3Kx9cVNbSGBtxAJKkYOCOfXINNu5jKqu + zKkD5VC9PpQCEHLPnpjNTtfSvbC3fDIOmRkj8ar4zIPl5wf51OMzBPNuVG3CAPuO1fy6daAK0G5CXyAUYEZGRmhuUYUFcTuFO4Z4I6H3FWZyjCIptyYxuAGMHJHPJ/p9KQyGMhVLFFfeCBuzx7jFRtyR + VPgIjkQsgcI2dp6EA9KsXNsAJJo3hCE5RFkyRzwMUxFUjHyngjrSDg + tSRJ5hUKMsxwM + tIwx + HpSGVpFCueODyKKn3Lj5hRSAtx21q8aFr1I3Od6vG3ynJxggHPTJ + veqt2ipGu11bdydoPHscimtIS7NlRk5xxxTXJZOSOKoRbtLdrt3ADEhd3ygdMjt9PSnapZLZ/IhdgVzmSIoRz6Gq2MYCYPHOKQ7mUrjrQAu5gUYd + 9PVYjEWLN5m4ALjjHPOfy pikhFI56D + lO37S6pgggKeM/l + VADD8kqkdwR16VJsj8jf5n7zdjZjtjrmopM7ckdO9OOA3c470AIG2FgOjd6lkijWCORZtzNkOmMbef1/+ vUD5IBxgA1KkpidtiK3GPmUN2x3pDEjGFxSgZGKau4sOMA9zTtwydoyPWgQ3GO1FKW5 + 634UUDJBE5h83Kbd237w3Z69OuPfpTZTsjDdecYpodR1PFFzIrwgLyQc1Qhcg0gxnoKI/uL6kUvP0FIBsgzG30qe3RjM0SyrEGUhixwpAGcfpx74qIelRqWZEUZGBj3JoAs3UAhXYJY5gybsxnI + H9 + Kbps4gu4ZWXIRwTnPFRywyxPsk4OAcexGR + hpqghNuepzmgB7ryyZz2yDUmnSmO5iYbRtbGXztAPHOO3NQbT/AH6RTtLJjHPX2oAu3FkscJf7TBIcD5VY5P8Anjr/AI1XhG8ou4Lk4yeg + tJtHB3ZyPyoQAZXNAFyPT55FyGgx7zoP5miqYopDFWIEBiuQeKbdKqQgqADnGRVhLpvsoty6eWH3DgZzjHXrj2qC6kVoAoIJDZOPSmIbbrJJsjUMznCqqjk + gFXZdOu7aFZrm1lijZtoLqRz + P + evpVCPhck + n8qlWVR3oQDAfmdSOh4PtSKPxPP86Ac3LEfdI60pTrjuc/ypAWbt4pQJRNPLMx + Yy88Y45zzj1qtSbD2H5mk2t6D86Bj/xpjkbh78UoVu4H/fx/wBagqTjpwaBFu2ezCFbpH3bgwZOpHocnGPwzz1qseoweaCCSTlcn1pCp6ggH6UASMoB5yM88UU0hmOcrz7UUDGeS + ei/wDfX/1qXySRglQKsYzSAce9MRD5TbQu5ePUUCI/7P5f/XqXvkfpR/OgCNU2sTn8BS08Y7ZpMc0gG0d6WigYmAKB1o + lKOvvmgBOv40UoFJ0oATHoDRSiigCSk7Z96KKYhScqzGm9ce9FFIBF6E + lOAyeaKKBje9Oxzj2oooAbijt RRQAUlFFAC44ooooA // 2Q ==

Wenn ich es in glänzend render, bekomme ich nur die leere Vorlage für jede Zeile, während das Bild nicht geladen wird.
Ich bin nicht sicher, ob ich den anfänglichen Tag entfernen sollte

data:image/jpeg;base64, 

nur das Bild zu bekommen ... aber nicht sicher, ob es hilft.

Mein aktueller Code, um die Bilder in Innere renderUI zu machen ist wie folgt:

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>" 

          )) 

Der gleiche Code funktioniert gut, wenn ich lokal JPEG-Bilder gespeichert machen.

Dies ist das erste Mal, dass ich mit Bildern arbeite, ich bin nicht sicher, ob die angegebenen Details ausreichend sind.

Answer 1

Ich bin nicht sicher, ob dies das ist, was Sie wollen, aber wenn Sie nur das angegebene kodierte Bild auf der Webseite ausgeben wollen, dann können Sie einfach diese Base64-Zeichenfolge als src Attribut eines <img> Tags verwenden. Hier ist ein Beispiel, um loszulegen:

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) 

Answer 2

Ok Ich habe die Antwort auf diese Frage gefunden here. Als ich meine Suchzeichenkette änderte, um base64 einzuschließen, stolperte ich darüber.