Embedding Google Drive images in a Web Page

Home Forums Learning Forum Internet Learning Forum Embedding Google Drive images in a Web Page

This topic contains 0 replies, has 1 voice, and was last updated by  Keith Taylor 9 months, 2 weeks ago.

  • Author
    Posts
  • #4075

    Keith Taylor
    Participant
    Ŧallars: Ŧ 991.90



    I got stuck today trying to embed an image from my Google Drive into a web page.

    My problems started because the image I wanted to include in a forum post was on a server that prevented hotlinking. But, I’m happy with that. Because I apply hotlinking protection to all of my websites. So, I simply saved the image to my Public Google Drive folder. Then pasted the Google Drive Link.

    But, all I got was a broken image icon! 😥

    I double checked permissions, and the picture was definitely viewable even when I was not logged in to Google. Eventually, I found the magic key:
    https://drive.google.com/uc?export=view&id=

    Obviously, there is a little more to that. Because you have to add the id at the end. But that’s easy to find.

    In Google Drive, if you share your image, you will get a link that looks like:
    https://drive.google.com/open?id=0B4r5K-pSc3Tcck9mSDk5VlhIOGc
    Or, depending on how you find the sharing link:
    https://drive.google.com/file/d/0B4r5K-pSc3Tcck9mSDk5VlhIOGc/view?usp=sharing

    So, you can see the id that has to be added to my first code to look like:
    drive.google.com/uc?export=view&id=0B4r5K-pSc3Tcck9mSDk5VlhIOGc

    Then, you can paste that in an <img> tag just like this:
    Was disappointed with embedding Google Drive Images

You should Connect to Shrewdies to reply to this topic.


Simply click one of the buttons above to connect using your favourite network. Then, a box will appear here for you to post your reply.