はじめに
CodePenのProアカウントでは、CodePen内で使うリソースのHostingサービスがあるのですが、無料アカウントの場合はどこか他のサーバにホストしてもらう必要があります。いろいろと方法はありますが、一番簡単だと言われているDropboxを使った方法を紹介します。
Dropboxのファイルリンクを得る
1．画像ファイルをDropboxフォルダに入れる。
まずはCodePen内に表示させたい画像ファイルをDropboxに追加します。
2．フォルダ内の画像ファイル名を右クリックし、「Dropboxリンクをコピー」を選択する。
その他、Dropboxのサイトからリンクを得る方法もあります。
Dropboxファイルリンクを得る方法: https://youtu.be/Iu-F4JLa_z4
3．先ほどコピーしたリンクをCodePen内の任意の場所にペーストする。
リンクをペーストしたら、下のステップへ進んでください。
リンクの編集
このままでは画像は表示されないのでペーストしたリンクを編集します。
4．リンクを編集する
コピーしたリンクは https://www.dropbox.com... になっていると思いますが、
www を消して代わりに dl を追加し https://dl.dropbox.com... にします。
dropbox.comでレンダリングを実行する: https://www.dropbox.com/ja/help/201
これで画像が表示されます。