CSS HTML Web

Dropboxに保存した画像をimgタグなどでWebページに埋め込む

投稿日:

こんにちは!シミダイ(@shimidai2100)です。

自分のWebページやCodePenなどに画像を埋め込む方法はないか?と探していましたところ、

Dropbox内に保存した画像をWebページに表示する方法がわかりましたので共有します。

Dropboxの画像ファイルを埋め込むことでサーバーの容量を節約できたりサーバーの転送量を節約できたりすることが出来ます。


Dropboxで画像ファイルを共有

まずはDropboxに保存した画像を共有します。

Dropboxを開いて対象のファイルの「共有」を選択します。

共有を選択すると以下の画面が表示されます。

リンクを作成」を選択して、URLを生成します。

リンクの生成が終わると「リンクをコピー」が表示されるので、これを選択します。

共有する画像ファイルのリンクを修正

Dropboxのリンクをそのまま使用しても画像ファイルとして利用できません。

なのでリンクURLを変更してあげる必要があります。

URLは「https://www.dropbox.com/s/XXXXXXXXXX/XXXXXX?dl=0」となっていると思います。

最後についています「?dl=0」を「?dl=1」に変更することでimgタグに埋め込むことが出来るようになります。

サンプルでは

  • 修正前 ⇒ 「https://www.dropbox.com/s/f1ja6agumqcp0tc/Autumn-leaves.jpg?dl=0」
  • 修正後 ⇒ 「https://www.dropbox.com/s/f1ja6agumqcp0tc/Autumn-leaves.jpg?dl=1」

となります。

実際にimgタグでWebページに埋め込んでみる

では実際にimgタグでWebページに画像ファイルを埋め込んでみます。

以下がサンプルの紅葉の画像になります。

Dropboxの画像ファイルを共有してWordPressに読み込んだサンプル

このようにDropboxを使用すれば簡単に画像を共有することができるのでオススメです。

スポンサードリンク

関連記事

-CSS, HTML, Web

Translate »

Copyright© shimidai2100 , 2019 All Rights Reserved.