画像投稿編集ページにプレビューを表示させたい

Question

JaVascriptの実装中
プレビューで画像を表示させる機能のコードを書いています。
表示する画像を生成しているが、画像表示できません。

prevew.js ↓

if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function() {
    const ImageList = document.getElementById('item-box-img');

     // 選択した画像を表示する関数
     const createImageHTML = (blob) => {

      // 画像を表示するためのdiv要素を生成
     const imageElement = document.createElement('div')
     imageElement.setAttribute('class', "image-element")
     let imageElementNum = document.querySelectorAll('.image-element').length


     // 表示する画像を生成
     const blobImage = document.createElement('img')
     blobImage.setAttribute('src', blob)

    //  ファイル選択ボタンを生成
     const inputHTML = document.createElement('input')
     inputHTML.setAttribute('id', `item-image${imageElementNum}`)
     inputHTML.setAttribute('name', 'item[images][]')
     inputHTML.setAttribute('type', 'file')

     // 生成したHTMLの要素をブラウザに表示させる
     imageElement.appendChild(blobImage)
     imageElement.appendChild(inputHTML)
     ImageList.appendChild(imageElement)

     inputHTML.addEventListener('change', (e) => {
      file = e.target.files[0];
      blob = window.URL.createObjectURL(file);

      createImageHTML(blob)
      
     })
    }

    document.getElementById('item-image').addEventListener('change', (e) => {
      let file = e.target.files[0];
      let blob = window.URL.createObjectURL(file);

      createImageHTML(blob)

    });
  });
}

ご教授よろしくお願いします。

Answer 1

過去の質問でアップロードプレビューの回答をしたことがあります。
ご参考になれば。

Answer 2

edit.html.erbの記載が足りなかった

<div id= "item-box-img">
   <div class='item-img-content'>
      <% @item.images.each do |image|%>
        <%= image_tag image, class:"item-box-img" %>
      <% end %>
   </div>
</div>

これで画像がプレビューされる。
あとは、お好みでリサイズをかけると画像サイズも指定できる
（image.~で記述）