こんにちは！土門大貴(daikidomon)です。
自分の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ページに画像ファイルを埋め込んでみます。
<img src=https://www.dropbox.com/s/f1ja6agumqcp0tc/Autumn-leaves.jpg?dl=1>以下がサンプルの紅葉の画像になります。
このようにDropboxを使用すれば簡単に画像を共有することができるのでオススメです。
