107

私のクライアントがGoogleドライブに写真をアップロードしていて、会社のWebサイトに写真を表示したいと思っています。GoogleドライブのコンテンツをWebページに表示するためのドキュメントを確認しましたが、これはWebページにコンテンツを表示するための手順にすぎないようです。

私の質問は、クライアントのWebページにコンテンツを直接表示するにはどうすればよいですか？

4

18 に答える 18

114

Googleドライブの[リンクを取得]オプションを使用してURLを取得します。

<img>HTMLでタグを使用し、そこにリンクを貼り付けます。

Open?URLをに変更しますuc?。

于 2016-01-25T14:01:36.913 に答える
68

外部サイトを使わずにそれを行う方法を見つけました。

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

画像のIDを取得する必要があります。[新しいウィンドウで開く]をクリックして、URLからIDを取得します。

[新しいウィンドウで開く]をクリックします"></ p> </ div> </ data> <hr> <data id = 

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

ローカルホストに画像ファイルを保存すると多くのスペースが必要になり、サイトの速度が低下するため、WordPressサイトで使用しています。

「alt/option」ボタンを使用して複数のURLを同時に編集するのは簡単なので、textmateを使用します

Googleドライブの画像を埋め込む例

元のURL：https: //drive.google.com/file/d/ 0B6wwyazyzml-OGQ3VUo0Z2thdmc / view

/d/元のURL（との間の文字）からIDをコピーし、次の/viewURLで使用する必要があります。

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

以下の画像は、この方法を使用して埋め込まれています。

ポーラ・ボロフスカによる写真

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Google Drive</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <img src="https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc">
</body>

</html>

ありがとうhttps://codepen.io/jackplug/pen/OPmMJB

于 2017-03-14T12:51:32.127 に答える
16

画像ファイルがある場合は、Googleドライブのパブリックフォルダにアップロードし、そのフォルダIDをアドレスバーからコピーして（例：0B0Gi4v5omoZUVXhCT2kta1l0ZG8 ）、 GDrivesのフォームに貼り付けて、独自のエイリアス（例：myimgs）を選択します。出来上がり！たとえばhttp://gdriv.es/myimgs/myimage.jpgを使用して、画像に1つずつアクセスできます。

フォルダ全体を（フレーム内に）Webサイトに埋め込む場合は、次のURLのいずれかを使用して、[folderID]を独自のIDに置き換えることができます。

XMLまたはJSONでファイルリストを取得する場合は、YQLを使用できます。

注：Google +フォトを使用して、画像をホストしたり埋め込んだりすることもできます。

于 2013-04-02T21:00:02.703 に答える
11

更新2017年2月18日 GoogleはGoogleドライブの無料ホスティング機能を廃止しました。現在、静的WebサイトをGoogleドライブで無料でホストすることはできません。

ただし、JavaScript、CSS、および画像ファイルをGoogleドライブでホストする場合でも、ホストすることができます。ファイルのパーマリンクを取得する必要があります。次の更新されたチュートリアル（2017）。

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

于 2017-02-18T07:32:03.977 に答える
10

グーグルドライブのヘルプページから：

ドライブを使用してWebページをホストするには：

  1. drive.google.comでドライブを開き、ファイルを選択します。
  2. ページ上部の[共有]ボタンをクリックします。
  3. 共有ボックスの右下隅にある[詳細設定]をクリックします。
  4. [変更...]をクリックします。
  5. [オン]-[Webで公開]を選択し、[保存]をクリックします。
  6. 共有ボックスを閉じる前に、[共有へのリンク]の下のフィールドのURLからドキュメントIDをコピーしてください。ドキュメントIDは、URLのスラッシュで囲まれた大文字と小文字、および数字の文字列です。
  7. 「www.googledrive.com/host/[docid]のようなURLを共有します。ここで、[doc id]は、手順6でコピーしたドキュメントIDに置き換えられます。

これで、誰でもあなたのWebページを表示できます。

ウェブサイトで画像を表示したい場合は、通常どおり、HTMLにpicへのリンクを埋め込みます。

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

ノート：

2015年8月31日以降、ユーザーとデベロッパー向けのGoogleドライブでのウェブホスティングは廃止される予定です。この機能は、2016年8月31日までの1年間、引き続きご利用いただけます。2016年8月31日には、googledrive.com / host /[docid]によるコンテンツの提供が終了します。より詳しい情報

于 2015-06-20T19:01:07.580 に答える
9

上記の答えの拡張。UNIXコマンドを作成したので、ワークフローで簡単に実行できます。

  1. 変換する必要があるGoogleドライブの写真のURLをコピーします。例えば

Googleドライブの画像のURLをコピーする

https://drive.google.com/file/d/XXXX/view?usp=sharing
  1. ターミナルを開き、このコマンドを実行します。

指示：

echo https://drive.google.com/uc\?export\=view\&id\=`echo $(pbpaste) | cut -d '/' -f 6`

出力：

https://drive.google.com/uc?export=view&id=XXXX

PSここからコマンドをコピーした場合。必ずGoogleドライブの画像のURLをもう一度コピーしてください。：P

クリップボードから取得するため、ステップ2コマンドで何も変更する必要はありません。正しい形式でコピーされていることを確認してください。 https://drive.google.com/file/d/XXXX/view?usp=sharing

于 2020-01-05T20:45:26.820 に答える
9

私は今同じ問題を抱えていますが、この記事は私を助けてくれます。2020年のアップデート！

私はこの記事から解決策を得ました：
https ：//dev.to/imamcu07/embed-or-display-image-to-html-page-from-google-drive-3ign

記事の手順は次のとおりです。

  1. 画像をGoogleドライブにアップロードします。
  2. 共有オプションから画像を共有します。
  3. 共有リンクをコピーします（サンプル：https ：//drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view？usp = shareing ）
  4. リンクからIDをコピーします。上記のリンクでは、IDは次のとおりです。14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
  5. 以下のリンクを見て、IDを置き換えてください。 https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r

IDを置き換えた後：https ：//drive.google.com/thumbnail？id = 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

  1. <img>次に、タグへのリンクを挿入します。

そして今、それは機能するはずです。

于 2020-10-29T13:52:22.833 に答える
8

ブロガーやその他のサイトにGoogleドライブの画像を埋め込みたい場合は、指示に従ってください：-

ブロガー

  1. Googleドライブに画像をアップロードする
  2. 画像をクリックして一般公開
  3. <img src='https://drive.google.com/uc?export=view&amp;id=1OCx6mUEMbWcwCQbDePA5PeeOh'/>
于 2019-09-13T17:58:50.850 に答える
6

この方法では、必要なサイズや解像度で画像を埋め込むことができます。

  1. Googleドライブにフォルダを作成します

  2. 「共有」ボタンを使用してフォルダ（または画像自体）を公開します

  3. URLをコピーしてIDを抽出します。次のようになります
    https://drive.google.com/file/d/ID-HERE/view?usp=sharing

  4. 次のようなものを画像srcとして使用します。
    https://drive.google.com/thumbnail?id=${imageId}&sz=w${width || 200}-h${height || 200}

    例：
    https://drive.google.com/thumbnail?id=ID-HERE&sz=w200-h200

後で番号を変更して、w必要hなサイズを取得できます。画像は、これらの寸法に収まるように縮小されます。

于 2020-07-22T20:12:41.070 に答える
5

Googleドライブホスティングは非推奨になりました。2016年8月31日より動作を停止しました。

Googleドライブでのホスティング-廃止スケジュール

以前にGoogleドライブで画像をホストする方法の説明を削除しました。

于 2013-12-11T06:40:36.367 に答える
5

リストビュー

<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#list" width="700" height="500" frameborder="0"></iframe>

グリッドビュー

<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#grid" width="700" height="500" frameborder="0"></iframe>

続きを読む： https ：//thomas.vanhoutte.be/miniblog/embed-add-google-drive-folder-file-website/

于 2015-09-08T20:06:17.823 に答える
0

より良い方法はわかりませんが、phpを使用してページをデータマイニングできます。たとえば、グーグルに行ってフォルダを共有すると、そのフォルダに行くと次のようになります

https://drive.google.com/folderview?id=0B8TT0olkjsdkfji9jekbFF4LWc&usp=sharing

^^^実際のリンクではありません

あなたが探しているのは、このページのソースコード内の個々の画像です

次に、phpを使用してソースコードを取得します

<? $f = fopen ("http://www.example.com/f", r);
echo $f;
?>

これで$fにソースがあり、他のphpコマンドを使用して、必要な画像でURLのみを分離できます。少し手間がかかりますが、非常に実行可能です。

これらの画像リンクが希望どおりに表示されたら、それらをdivまたはテーブル構造に組み込んでギャラリーに表示することもできます。グレーボックス要素を追加して効果を上げることもできます。

于 2015-08-23T19:43:03.367 に答える
0

ドライブで画像を公開するためのいくつかの興味深い代替案（非推奨）：

1.Googleフォト

ドライブではなくGoogleフォトに画像をアップロードすると、公開ウェブリンクが取得されます。

この振る舞いは私には少し驚きですが、リンクは非常に長くランダムであるため、彼らは明らかに「あいまいさによるプライバシー」を実践しています。

2.Google描画

「Google描画」プログラム（ドライブに組み込まれている）を使用して画像を作成する場合は、を押して公開リンクを取得できます。File > Publish to Web

ここに画像の説明を入力してください

注：これは、既存の画像を共有しようとしている場合の解決策になる可能性があります-画像をエディターに貼り付け、キャンバスを画像にトリミングします（file > Page Setup）-しかし、少し面倒です。ただし、基本的な画像編集を行う必要がある場合、または単純なアイコン/グラフィックを作成しようとしている場合は、これは便利だと思います。

于 2019-02-07T22:31:07.457 に答える
0

このスペイン語のブログが説明し、リンクコンバーターを提供しているように。

  1. Googleドライブに画像をアップロードします。
  2. ウェブ上の誰とでも共有できます。
  3. 共有リンクをコピーします。

次に、ClasicWebToolsが提供するコンバーターを使用してWebで使用できます。

于 2021-07-18T18:37:04.643 に答える
-2

ファイルがパブリックフォルダにある場合は、Googleドライブのウェブサイトホスティングを使用できます。

于 2013-03-24T00:34:15.760 に答える
-3

ドライブに写真をアップロードしたとしたら、Googleドライブを開いているときに、Chromeで開発ツールを開いてimgタグに移動し、src属性の横にあるリンクをコピーして使用するだけです。

于 2020-11-02T17:39:39.220 に答える