自作のアプリケーション上に画像を表示するには
記事投稿を目的としたサービスは特に画像を多用します。
少なくとも記事一覧と記事詳細画面にはその目的に応じた画像を表示させたいでしょう。
今回は記事一覧にサムネイル画像を設置する事をゴールにして、どのように画像のアップロードを行うのかをまとめます。
ちなみに僕は3時間ぐらい調べたり悩んだりしました。
画像を表示するには
簡単に言うと、htmlのsrc=""にパスを表示する事が出来れば画像が表示されます。
よって、
・そのパスを格納する場所
・パスを関数を使って最適に表示する
これらの処理が必要です。
参考にした記事
今回は
・画像をアップロードする
https://qiita.com/j54854/items/1f0560142e39d888251c
・アップロードした画像を表示する
https://qiita.com/felyce/items/57421ea191ab89175e9e
それぞれURLの記事を使って行いました。
Qiitaって良記事があっても組み合わせて解決しないといけない課題があった時に探す時間がかかりますよね。。。
つまづいたところ
画像のファイルとパス設計が出来ても、フロントに出す時のURL取得が上手くいきませんでした。
<img class="img-thumbnail" src="{{ day.picture.thumbnail.url }}" alt="Thumbnail image">
srcの中で画像のパスを指定することが上手くいかず、結論、
day.picture.thumbnail.urlの.urlを加える事で解消しました。