Why isn't my image loading

Question

I uploaded the image to google drive then i used the link in the src attribute
Am using a phone
https://code.sololearn.com/WO9vdpUjJR23/?ref=app

Answer 1

Remove www and put dl...and check your code
https://code.sololearn.com/WQZ73KUvEWG0/?ref=app

Answer 2

https://code.sololearn.com/WAYZjgRJO0uz/?ref=app

Answer 3

Google drive by default does not allow you share image without api key. I just open your link from a browser, use devtool to find the image link.

However this link maybe temp link, could be not effective later.

Answer 4

Can you explain to me how you fixed it?

Answer 5

#Part 1

YaYa Basically in order to use source for an image the url must return an image itself only which usually ends with an image extension.

However the url actually points to *a webpage which display the image instead of image itself*.

https://www.dropbox.com/s/g0frnm6n8ioayun/IMG_20190605_102704_849.jpg?raw

If you futher open the image in new tab you'll see a much longer url like following:-

https://ucf50592fea42dbc091094728e5c.previews.dropboxusercontent.com/p/thumb/AAdsVGNjdOZVp597YR63y2pH7HkITSwGBSvXsOpKu8KuoezKV-PbWAV03QhuR3wycVC28iNn3y7ULKqs6vm-WeY7HUXpdOJbvWD45oiP0nXxHO7rXgaIh9JQrBPbF4spyj7VOqLNTbQKB_qUEBQFwEh3jTR2CMc1rii5Ds7ZcgPNiHhtojfGLqQfToe-xjDRMnncmAQQCZcLfIYKG_nFCuRrw5vZh_UbeRGHechmImYTBn0vp-IKU5hiNDJEQ5Qpu_scjZ-yEACjMEN1OIj7piwNIGbDMzU8T-SdvlfNvQOijJhb4m_6dKt_D5DhiSx2R3L14YkTsHwi1UWHvlkIifAet860_VjFlkcvZoyTtIN73-Qvw1OZUkfpK4JTMfoBYKU/p.jpeg?fv_content=true&size_mode=5

Answer 6

#Part 2

This started to become tricky as the url comes with token/signature that will expire after a specific duration to prevent hotlinking.

Therefore if you would like to embed cloud hosted image in your website, make sure that it supports hotlinking or at least the url resolves to a valid image.

Hopefully it helps! 😉