Problems with, and best practice for, rendering images on shinyapps.io

[Aaron Kaufman]

Hi all,

I'm building an application where users compare images, and I need them to be able to click on whichever image they choose. I've set this up so that there are two side-by-side actionLink buttons, and the icons are images:

output$survey <- renderUI({

        index$i

        if(max(isolate(index$i)) == length(things) && isTRUE(all.equal(things, previous_things))) {

            list(p("Finished sorting"))

        } else {

            ## but image links in the UI

            list(

              # creating a new box which spans 4

                column(width=1, 

                        actionLink("goButton1", label=NULL,

                                 icon=img(src=things[index$i[1]],

                                          width = 400, height = 300))),

                column(width=1, offset=10,

                       actionLink("goButton2", label=NULL,

                           icon=img(src=things[index$i[2]],

                                    width = 400, height = 300)))

                      )                      

         }

    })

Locally, I've managed to successfully render the images by having the img(src=things)... be the absolute file path to the images:

things <- paste("D:\\Documents\\Research\\compactness\\img\\", things, ".jpg", sep=""), or something similar. All good so far. To deploy, I change that file path to

things <- paste("/srv/connect/apps/compactness/img/", things, ".jpg", sep=""), and I run a sanity check print(all(file.exists(things))), which prints TRUE when I check the logs on shinyapps.io. However, the images appear broken!

I've also tried variants where: the images are in the same directory as ui.R and server.R; where the images are in /srv/connect/apps/compactness/www/ and rather than providing a file path, I provide the URL, for example https://arkaufman.shinyapps.io/compactness/01_0_001.jpg, which if you check that URL, will still render the image independently. I've also tried quite a few other things. I have no idea what could be so different! 

I would greatly appreciate any advice here. I'm glade to provide more code if it would be helpful.

Thanks!

Aaron

[Andy Kipp]

Aaron,

What I think you want here is to ensure your image files are in the 'www' directory, and then reference them using a relative path not including the 'www'. For example:

If your image is in:

www/images/myimage.png

then you want:

 

src="images/myimage.png"

Let me know if that helps.

You might want to also look at renderImage.

--
You received this message because you are subscribed to the Google Groups "ShinyApps Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shinyapps-use...@googlegroups.com.
To post to this group, send email to shinyap...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shinyapps-users/cdfb6194-e81f-41bd-80d1-ce4c775c9cbb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Aaron Kaufman]

Thanks Andy, that did work. It's pretty non-intuitive, but at least now the results to this problem will show up on a google search!

--

Aaron R Kaufman

PhD Candidate, Harvard University

Department of Government

818.263.5583