发表新帖
发表新帖

How do I display images from Google Drive on a website?

前端 未结
关注
17 1940
傲寒
傲寒 2020-12-02 05:35

A client of mine has uploaded some photos to their Google Drive and would like me to display their photos on their company website. I reviewed the documentation for displayi

相关标签:
17条回答
  • 既然无缘
    2020-12-02 06:16

    A couple interesting alternatives to publicly hosting an image on Drive (deprecated):

    1. Google Photos

    If you upload an image to Google Photos instead of Drive it gets a public web link.

    This behavior is a little surprising to me, but the link is very long and random, so they are apparently practicing "privacy by obscurity."

    2. Google Drawing

    If you create an image using the "Google Drawing" program (built into Drive) you can press File > Publish to Web to get a public link.

    Note: This could be a solution if you're trying to share an existing image-- paste the image into the editor and crop the canvas to your image (file > Page Setup)-- but it's a little cumbersome. If you need to do some basic image editing, though, or if you're trying create a simple icon/graphic, I think this is nifty.

    0 讨论(0)
  • 醉酒成梦
    2020-12-02 06:17

    Use the 'Get Link' option in Google Drive to get the URL.

    Use <img> tag in HTML and paste the link in there.

    Change Open? in the URL to uc?.

    0 讨论(0)
  • 無奈伤痛
    2020-12-02 06:17

    From google drive help pages:

    To host a webpage with Drive:

    1. Open Drive at drive.google.com and select a file.
    2. Click the Share button at the top of the page.
    3. Click Advanced in the bottom right corner of the sharing box.
    4. Click Change....
    5. Choose On - Public on the web and click Save.
    6. Before closing the sharing box, copy the document ID from the URL in the field below "Link to share". The document ID is a string of uppercase and lowercase letters and numbers between slashes in the URL.
    7. Share the URL that looks like "www.googledrive.com/host/[doc id] where [doc id] is replaced by the document ID you copied in step 6.

    Anyone can now view your webpage.

    If you want to see your image in a website embed the link to pic in your html as usually:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Example image from Google Drive</title>
    </head>
    <body>
        <h1>Example image from Google Drive</h1>

        <img src="https://www.googledrive.com/host/[doc id]" alt="whatever">

    </body>
</html>

    Note:

    Beginning August 31st, 2015, web hosting in Google Drive for users and developers will be deprecated. You can continue to use this feature for a period of one year until August 31st, 2016, when we will discontinue serving content via googledrive.com/host/[doc id]. More info

    0 讨论(0)
  • 无人及你
    2020-12-02 06:17

    1 - Create a folder in your google drive;

    2 - Make this folder public (on share property)

    3 - use something like this as your image src: https://drive.google.com/thumbnail?id=${imageId}&sz=w${width || 200}-h${height || 200}

    0 讨论(0)
  • 南笙
    2020-12-02 06:20

    I have found a way to do it without using external sites.

    <img src="https://drive.google.com/uc?export=view&id=XXX">

    https://gist.github.com/evansims/f23e2f49e3d4be793038

    <a href="https://drive.google.com/uc?export=view&id=XXX">
    <img src="https://drive.google.com/uc?export=view&id=XXX"
    style="width: 500px; max-width: 100%; height: auto"
    title="Click for the larger version." />
</a>

    You'll need to grab the ID of the image: Click on “Open in new window” and get the ID from the URL.

    Click on “Open in new window”

    0 讨论(0)
  • 轻奢々
    2020-12-02 06:22

    If you have some image files, just upload them to a public folder on your Google Drive, copy its folder ID from the address bar (e.g. 0B0Gi4v5omoZUVXhCT2kta1l0ZG8) and paste it into a form at GDrives, then choose your own alias (e.g. myimgs) and voila! You can access the images one by one using e.g. http://gdriv.es/myimgs/myimage.jpg.

    If you want to embed a whole folder on your website (in a frame), you can use one of the following URLs, replacing [folderID] with your own ID:

    • http://gdriv.es/myimgs/
    • https://docs.google.com/folder/d/[folderID]/preview?rm=minimal
    • https://drive.google.com/folderview?id=[folderID]

    If you prefer to get the file list in XML or JSON, you can use YQL.

    Note: You can use Google+ Photos to host ans embed your images as well.

    0 讨论(0)
 看不清?
提交回复
热议问题