Home > Web Front-end > JS Tutorial > How do I display images from Google Drive on a website?

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

Mary-Kate Olsen
Release: 2024-12-24 22:22:10
Original
685 people have browsed it

Step 1: Open Google Drive
Visit Google Drive Official Website and share a file.

Step 2: Share File
Open Google Drive and upload the image you want to use on your website. Then, click on the image with your right mouse button and select "Share" to grab the link and change permission.

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

Step 3: Change Permission
In the sharing window, click on the permissions menu and pick "Anyone with the link." This lets anyone with the link see the file, even if they don't have a Google account. Then, hit "Copy link" to copy the link to your file.

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

Step 4: Create Thumbnail Image Link

  • Step 3 will give link like this: https://drive.google.com/file/d/10hhX4pIZr0NhuusN4eHvf4ghah5d6yAG/view?usp=sharing.

  • Extract the ID of the image from the link, which is between /d/ and /view. In this case, the ID is 10hhX4pIZr0NhuusN4eHvf4ghah5d6yAG.

  • Use the extracted ID to create a thumbnail link by inserting it into the following URL template: https://drive.google.com/thumbnail?id={ID of Image}.

  • The final thumbnail link will look like this: https://drive.google.com/thumbnail?id=10hhX4pIZr0NhuusN4eHvf4ghah5d6yAG.

Step 5: Use it on Your Website

<img src="https://drive.google.com/thumbnail?id=10hhX4pIZr0NhuusN4eHvf4ghah5d6yAG" alt="Image From Drive">
Copy after login

reference
https://codepen.io/raulpenate/pen/wvOozzw

The above is the detailed content of How do I display images from Google Drive on a website?. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template