Wie zeige ich Bilder von Google Drive auf einer Website an?

Question 1

Ein Kunde von mir hat einige Fotos zu seinem hochgeladen Google Drive und möchten, dass ich ihre Fotos auf ihrer Firmenwebsite zeige. Ich habe die überprüft Dokumentation zum Anzeigen von Google Drive-Inhalten auf einer Webseite, aber es scheint, dass dies einfach die Anweisungen zum Anzeigen der Inhalte auf einer Webseite sind, was es bereits tut.

Meine Frage ist, wie zeige ich die Inhalte direkt auf der Webseite des Kunden an?

Question 2

Beispiel für das Einbetten eines Google Drive-Bildes

Ursprüngliche URL: https://drive.google.com/file/d/0B6wwyazyzml-OGQ3VUo0Z2thdmc/Sicht

Sie müssen die ID aus der Original-URL kopieren (die Zeichen zwischen den /d/ Und /view) und verwenden Sie es in dieser URL:

https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc

Das folgende Bild wird mit dieser Methode eingebettet:

Foto von Paula Borowska

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Drive</title>
</head>
<body>
    <img src="https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc">
    <br>
    <a href="https://drive.google.com/uc?export=download&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc" download>
        Download
    </a>
</body>
</html>

Danke https://codepen.io/jackplug/pen/OPmMJB

Question 3

Verwenden Sie die Option „Link abrufen“ in Google Drive, um die URL abzurufen.

Verwenden <img> -Tag in HTML und fügen Sie den Link dort ein.

Ändern Open? in der URL zu uc?.

Question 4

Ich habe einen Weg gefunden, dies zu tun, ohne externe Websites zu verwenden.

<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>

Sie müssen die ID des Bildes abrufen: Klicken Sie auf „In neuem Fenster öffnen“ und erhalten Sie die ID aus der URL.

Question 5

Wenn Sie einige Bilddateien haben, laden Sie sie einfach in eine hoch öffentlich Ordner auf Ihrem Google Drive, kopieren Sie ihn Ordner-ID aus der Adressleiste (zB 0B0Gi4v5omoZUVXhCT2kta1l0ZG8) und fügen Sie es in ein Formular unter ein GDrives um einen eigenen Alias zu wählen (z myimgs) – und voila! Sie können auf die Bilder einzeln zugreifen, indem Sie z http://gdriv.es/myimgs/myimage.jpg.

Wenn Sie einen ganzen Ordner auf Ihrer Website (in einem Frame) einbetten möchten, können Sie eine der folgenden URLs verwenden und ersetzen [folderID] mit eigenem Ausweis:

http://gdriv.es/myimgs/

Wenn Sie die Dateiliste lieber in XML oder JSON erhalten möchten, können Sie verwenden YQL.

Hinweis: Sie können verwenden Google+ Fotos um auch Ihre Bilder zu hosten und einzubetten.

Question 6

Ich habe gerade das gleiche Problem, aber dieser Artikel hilft mir. Updates für das Jahr 2020!

Ich habe die Lösung aus diesem Artikel:
https://dev.to/imamcu07/embed-or-display-image-to-html-page-from-google-drive-3ign

Dies sind die Schritte aus dem Artikel:

Laden Sie Ihr Bild auf Google Drive hoch.

Teilen Sie Ihr Bild über die Freigabeoption.
Kopieren Sie Ihren Freigabelink (Beispiel: https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing)
Kopieren Sie die ID von Ihrem Link, im obigen Link lautet die ID: 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

Schauen Sie sich den folgenden Link an und ersetzen Sie die ID.
https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r

Nach ID ersetzen: https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

Fügen Sie nun den Link zu Ihrer ein <img> Schild.

Und jetzt sollte es funktionieren.

Question 7

Aktualisierung 18.02.2017
Google hatte die kostenlose Hosting-Funktion auf Google Drive abgewertet, und jetzt können Sie Ihre statische Website nicht kostenlos auf Google Drive hosten.

Aber wenn Sie Ihre JavaScript-, CSS- und Bilddatei auf Google Drive hosten möchten, können Sie dies immer noch tun. Sie müssen nur den Permalink der Datei erhalten. folgendes aktualisiertes Tutorial (2017).

http://www.bloggerseolab.com/2017/02/host-images-javascript-and-css-on-google-drive.html

Question 8

Aus Google Drive-Hilfeseiten:

So hosten Sie eine Webseite mit Drive:

Öffnen Sie Drive unter drive.google.com und wählen Sie eine Datei aus.

Klicken Sie oben auf der Seite auf die Schaltfläche Teilen.

Klicken Sie in der unteren rechten Ecke des Freigabefelds auf Erweitert.

Klicken Sie auf Ändern….

Wählen Sie Ein – Öffentlich im Web und klicken Sie auf Speichern.

Kopieren Sie vor dem Schließen der Freigabebox die Dokument-ID aus der URL in das Feld unter „Link zum Teilen“. Die Dokument-ID ist eine Zeichenfolge aus Groß- und Kleinbuchstaben und Zahlen zwischen Schrägstrichen in der URL.

Teilen Sie die URL, die wie folgt aussieht: “www.googledrive.com/host/[doc id] Wo [doc id] wird durch die Dokument-ID ersetzt, die Sie in Schritt 6 kopiert haben.

Jeder kann jetzt Ihre Webseite anzeigen.

Wenn Sie Ihr Bild auf einer Website sehen möchten, binden Sie den Link zum Bild wie gewohnt in Ihren HTML-Code ein:

<!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>

Notiz:

Ab dem 31. August 2015 wird das Webhosting in Google Drive für Nutzer und Entwickler eingestellt. Sie können diese Funktion ein Jahr lang bis zum 31. August 2016 weiter nutzen, wenn wir die Bereitstellung von Inhalten über googledrive.com/host/ einstellen.[doc id]. Mehr Info