Hi and Happy New Year. Am loving sharptools.io but am not able to get background images working. I always get an error like this “Error loading image Jq45xOfdwb5yG3Q4pI5e”. I’ve tried an image link from Drop Box, from Google Photos, from Imgur. Is there a size limitation? I’m always trying the same image. Maybe I’ll try a smaller one. This image DID work https://cdn.sharptools.io/static-images/index_powerful-integrations_c_scale,w_688.0cf997bdd556366d9fe6d853c5ce836e.png
That one worked. My original image was ~500K. I tried another that’s ~90K, no joy. Thoughts? I’m guessing it shouldn’t be this hard. I think many people have gotten it to work. It’d be awesome if the error message could be more descriptive than “Error loading image”. Thoughts? Suggestions?
Can you share an example URL of a media item that did not load?
Thanks Josh! Sorry about that. I should have thought to include initially.
https://imgur.com/a/tKQplIg
https://imgur.com/TznlHJF
https://www.dropbox.com/s/5kqlet57mzn8rv8/IMG_4637.jpeg?dl=0
Thanks, Scott! I had started drafting up this edit to my reply, so I’m going to go ahead and post it then take a look at your image links. 
When creating the Media Item in Manage Resources or adding a Media Item as a background in a Theme, you should see a preview of the image displayed. If the preview doesn’t display, it’s likely not going to load as the background either and indicates some sort of issue.
Totally agree. At one point in time, browsers exposed information about the reason why an image didn’t load, but most modern browsers don’t expose this information anymore for security purposes. That being said, if you are on a laptop or PC, you may be able to open the console for your browser and get a clue as to what went wrong. (eg. F12 on Google Chrome)
The two most common reasons are either the image truly isn’t available (eg. typo in the URL, server can’t be reached, etc) or more recently that Google Chrome has begun blocking mixed content (eg. the image is HTTP instead of HTTPS).
Keep in mind that both Dropbox and Google will serve images up in a webpage rather than serving the raw image by default. For dropbox, you can change the ?dl=0 to ?raw=1 to force it to serve the raw image. The How To: Add photos to a dashboard post has some tips on images from Imgur and Google Photos.
So it looks like the raw URLs you posted are:
https://imgur.com/a/tKQplIg
https://imgur.com/TznlHJF
https://www.dropbox.com/s/5kqlet57mzn8rv8/IMG_4637.jpeg?dl=0
Imgur
The first one links to the Imgur album whereas we need a raw link directly to the image. Similarly, the second link points to an imgur webpage that is displaying the image. So following the tips in the How To: Add photos to a dashboard post, if we open up that Imgur page and get the link directly to the image, we would get the following URL which should work:
https://i.imgur.com/L4W3EOC.jpeg
Dropbox
And for the Dropbox one, it’s also linking to a webpage which displays the image. So if we change the dl=0 to raw=1 it should work too:
https://www.dropbox.com/s/5kqlet57mzn8rv8/IMG_4637.jpeg?raw=1
Josh,
That did it, thanks! I’ll flag this post to keep for future reference. Thanks for the super quick reply. Happy New Year!
Happy New Year to you as well! Thanks for posting!
By the way… one thing… you mention browser being less forthcoming on what went wrong with images. To make sharpertools even more awesome, in your’alls spare time (laugh), you might include some of those checks in your code (for the http/shttp mix, or if you can tell the URL provided ends with .html or similar). Then you could provide most helpful info (like a pointer to your great info above) despite modern browser shortcomings.
Thanks again.
This was driving me crazy with Google Photos and I finally figured it out what was happening. I needed to set Google as my home page in Fully-Kiosk and sign in, change my start URL back to Sharptools and THEN all of my backgrounds and media tiles loaded right away.
@Lenwood_Hendrick thanks for sharing the tips. This is an interesting trick for accessing the images from Google Photos that are not set to public accessible.