Image not being retrieved from Dropbox

html image dropbox src
Samuel Mathews picture Samuel Mathews · May 1, 2014 · Viewed 8.1k times · Source

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

mcserep picture mcserep · May 1, 2014

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.

Related questions

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
How to display Base64 images in HTML?

I'm having trouble displaying a Base64 image inline. Can someone point me in the right direction? <!DOCTYPE html> <html> <head> <title>Display Image</title> </head> <body> &…

Read More
Responsive image align center bootstrap 3

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the …

Read More