学習39日目

内容

画像選択画面で画像を変更した場合のプレビュー処理

前提

• 画像投稿機能(active storage)実装済
• 画像プレビュー機能(javascript)実装済
• 追記部分以外の記述は省略

手順

imgを取得し、既にimgがあれば削除する処理を追記。

xxxx.html.erb

<script>
   let imageInput = document.getElementById("district_image")
   let imagePreview  = document.getElementById("image_preview")
   imageInput.addEventListener('change', (e) => {
       let file = e.target.files[0];
       let blob = window.URL.createObjectURL(file);
       if (document.querySelector('img')) {
           let img = document.querySelector('img')
           img.remove()
       }
       let img = document.createElement('img');
       img.setAttribute('src', blob);
       img.setAttribute('style', 'width: 150px; height: 150px;')
       imagePreview.appendChild(img);
   })
</script>

コメント

わざわざ既存のimgを削除しなくても、srcを新しいblobに置き換えれば問題なさそう。