テックキャンプ111日目〜画像プレビュー機能②

kobasaです(´ω`*)
前回学習したプレビュー機能をフリマアプリに実装していきます。
一応自動デプロイまで行って本番環境でも動いたので大丈夫なはず。
CSSの改良などあると思いますがとりあえず実装完了。

フリマアプリとミニアプリでは構造が異なり、レビューも依頼できないので
変な緊張感で実装していましたw

111日目の実装内容

まずはjsファイルを用意してHTMLにプレビュー表示スペースを作成するところから。
画像選択ボタンが含まれているdiv内にコードを追記

<div class="click-upload">
  <%= f.file_field :image, id:"item-image" %>
  <div id="image-list"></div>
  <%= image_tag @item.image %>
</div>

フォームに部分テンプレートを使用していないのでimage_tagはedit.htmlのみ設定。


次はjsファイルにメインのプレビュー機能の記述を。
取得するid名に気をつけてあとはほとんどミニアプリの内容で大丈夫そう。

そして気になっていた、新しい画像選択時に既にあるプレビュー画像を削除する記述。
new.htmlとedit.htmlにはロゴ画像があるのでclassの中にあるimgを指定してみました。

const imageContent = document.querySelector('.click-upload img');

挙動は大丈夫。指定の仕方はもっと良い方法があるかもしれませんね。
.click-uploadがどこに記述してあるのか分かりづらかったり。


最後にプレビュー画像のCSSを設定して画像サイズの調整。

/* プレビューの設定 */
.click-upload img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

CSSのセレクターの指定方法もquerySelectorと同様もっと良い記述があるかもしれませんね。

object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定するもの。
containを値にすると、置換要素をボックスサイズに合わせて縦横比を維持しながらリサイズして、全体が見えるようにはめ込む。

width: 100%; height: auto;の指定なので必要ないと思うけど、ミニアプリに記述があったので入れてみました。
widthとheightをpx指定したときに、画像の縦横比を守って表示するときに使用するものだと思う。
複数枚画像投稿で使用する気がする。

コメント

タイトルとURLをコピーしました