プレビュー機能の実装

プレビュー機能実装

概要

新規投稿、投稿編集時に選択した画像がプレビューとして表示される機能

preview.js作成

プレンビュー機能実装のため、app/javascriptの直下にファイル名 "preview.js"　を作成する。

importmapの編集

configフォルダにあるimportmap.rbへ下記を追記する。
pin "preview", to: "preview.js"

application.jsの編集

app/javascript/application.jsへ下記を追記する。
import "preview"

プレビュー機能の実装

取得した画像をブラウザへ表示するためにjavascript側で生成する。

// 画像を表示するためのdiv要素を生成
const previewWrapper = document.createElement('div');
previewWrapper.setAttribute('class', 'preview');

// 表示する画像を生成
const previewImage = document.createElement('img');
previewImage.setAttribute('class', 'preview-image');
previewImage.setAttribute('src', blob);

// 生成したHTMLの要素をブラウザに表示させる
previewWrapper.appendChild(previewImage);
previewList.appendChild(previewWrapper);