Image not being retrieved from Dropbox

Question

Hi! I have an image slider. When I try toe retrieve the images from my server, the images are properly displayed. (http://stthomasmountmtc.org/index.html)

However, when I try to retrieve the same images from Dropbox, the images are not displayed/retrieved. (http://stthomasmountmtc.org/index1.html)

 <img src="https://www.dropbox.com/s/woart55urbw792u/image1.jpg" alt="image" />

When I open the link in the src attribute in the browser, the images can be seen, so the link is obviously not broken. Please share your suggestions.

Thanks, Samuel Mathews.

Answer 1

The link in your code opens the gallery feature of Dropbox, which is a HTML webpage, not an image file. The direct link for that image is:

https://dl.dropboxusercontent.com/s/woart55urbw792u/image1.jpg

You should always set the source of an image tag in HTML to an URL which outputs an image - and not a webpage containing an image.

Answer 2

Another option to view a Dropbox image directly is to access the Dropbox link using the ?raw=1 parameter.

For example, if the Dropbox link is:

https://www.dropbox.com/s/83dcx4efx791s2i/stackoverflow.png?dl=0

change the ?dl=0 to ?raw=1, such as:

https://www.dropbox.com/s/83dcx4efx791s2i/stackoverflow.png?raw=1

Note that using "?dl=1" (instead of dl=0) will download the image.

Reference: https://www.dropbox.com/help/201

Answer 3

I was able to get this to work while trying to address a similar problem by logging into Dropbox, viewing the image itself, right clicking on the image and selecting "Copy Image Address".