画像のプレビュー表示を行いたい

Question

#質問
画像投稿機能の実装にruby on railsにて挑戦しています。
複数投稿を行うために、ファイル選択をし画像を選ぶと、
新しいファイル選択が増え更に画像を選択できるという挙動を実装できたのですが、
選択した画像をプレビュー表示するという挙動を実装する事ができません。
(投稿すると枠線のみが表示されます）（画像はitem_imageテーブルへ保存しております。）
#行ったこと
他サイトを参考にし、関数buildImgを定義し、indexとurlを受け取ってimgタグを
生成するというコードを書いたのですが上手く行きません。。。

下記にコードを記載致しますので、
ご教授のほど宜しくお願い致します。

item.js

$(document).on('turbolinks:load', ()=> {
  const buildFileField = (index)=> {
    const html = `<div data-index="${index}" class="js-file_group">
                    <input class="js-file" type="file"
                    name="item[item_images_attributes][${index}][image]"
                    id="item_item_images_attributes_${index}_image"><br>
                    <div class="js-remove">削除</div>
                  </div>`;
    return html;
  }

  
  

  const buildImg = (index, url)=> {
    const html = `<img data-index="${index}" image="${url}" width="100px" height="100px">`;
    return html;
  }

  let fileIndex = [1,2,3,4,5,6,7,8,9,10];


  lastIndex = $('.js-file_group:last').data('index');
  fileIndex.splice(0, lastIndex);

  $('.hidden-destroy').hide();

 
  $('.image-file').on('change', '.js-file', function(e) {
    const targetIndex = $(this).parent().data('index');
    const file = e.target.files[0];
    const blobUrl = window.URL.createObjectURL(file);
    if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
      img.setAttribute('image', blobUrl);
    } else { 
      $('#previews').append(buildImg(targetIndex, blobUrl));
      $('.image-file').append(buildFileField(fileIndex[0]));
      fileIndex.shift();
      fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
    }
  });

  $('.image-file').on('click', '.js-remove', function() {
    const targetIndex = $(this).parent().data('index');
    const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`);
    if (hiddenCheck) hiddenCheck.prop('checked', true);

    $(this).parent().remove();
    $(`img[data-index="${targetIndex}"]`).remove();
 
  
    if ($('.js-file').length == 0) $('.image-file').append(buildFileField(fileIndex[0]));
  });
  });

new.html.haml

 .items
    = form_with model: @item,local: true do |f|
      .items__box
        .items__box--list
          %p.name 出品画像
          %p.need 必須
         
      
      .items__box--image 
        #previews
          - if @item.persisted?
            - @item.item_images.each_with_index do |item_image, i|
              = image_tag item_image.image, data: { index: i }, width: "100", height: '100'
 
      = f.fields_for :item_images,@item.item_images.build do |item_image|
           
         
        .js-file_group{"data-index" => "#{item_image.index}"}
        .image-file  
          = item_image.file_field :image,class: 'js-file'
          %span.js-remove 削除

          - if @item.persisted?
            = image.check_box :_destroy, data:{ index: item_image.index }, class: 'hidden-destroy'
          - if @item.persisted?
            .js-file_group{"data-index" => "#{@item.item_images.count}"}
              = file_field_tag :image, name: "item[item_images_attributes][#{@item.item_images.count}][]", class: 'js-file'
              .js-remove 削除