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

前提・実現したいこと

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

現在、出品機能で商品のプレビュー機能を付けようとしています

・複数の画像の登録は出来ています
・商品の登録はデータベースで確認はできています

ファイルを入れた時だけ表示が出来ない状態を解決したいです

該当のソースコード

_item.html.haml

.buy-content
  .buy-content__inner
    = form_with model:@item, local:true do |f|
    
      -# 出品画像
      .buy-content__inner__up
        .buy-content__inner__up__box
          .buy-content__inner__up__box__name
            .buy-content__inner__up__box__name__image
              = f.label :出品画像
              %span.have-to 必須
          %p.ten-up 最大１０枚までアップロードできます
          #image-box
            #previews
              - if @item.persisted?
                - @item.images.each_with_index do |image, i|
                  = image_tag image.image.url, data: { index: i }, width: "100", height: '100'

            = f.fields_for :images do |i| 
              .js-file_group{"data-index": "#{i.index}"}
                = i.file_field :image, class: 'js-file'
                %span.js-remove 削除
                =icon("fa","camera")

              - if @item.persisted?
                = image.check_box :_destroy, data:{ index: image.index }, class: 'hidden-destroy'

            - if @item.persisted?
              .js-file_group{"data-index": "#{@item.images.count}"}
                = file_field_tag :image, name: "item[images_attributes][#{@item.images.count}][image]", class: 'js-file'
                .js-remove 削除

item.jp

$(function() {
  // 画像用のinputを生成する関数
  const buildFileField = (num)=> {
    const html = `<div data-index="${num}" class="js-file_group">
                    <input class="js-file" type="file"
                    name="item[images_attributes][${num}][image]"
                    id="item_images_attributes_${num}_image"><br>
                    <div class="js-remove">削除</div>
                  </div>`;
    return html;
  }

  // プレビュー用のimgタグを生成する関数
  const buildImg = (index, url)=> {
    const html = `<img data-index="${index}" image="${url}" width="100px" height="100px">`;
    return html;
  }

  // file_fieldのnameに動的なindexをつける為の配列
  let fileIndex = [1,2,3,4,5,6,7,8,9,10];

  // 既に使われているindexを除外
  lastIndex = $('.js-file_group:last').data('index');
  fileIndex.splice(0, lastIndex);

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

  $('#image-box').on('change', '.js-file', function(e) {
    const targetIndex = $(this).parent().data('index');
    // ファイルのブラウザ上でのURLを取得する
    const file = e.target.files[0];
    const blobUrl = window.URL.createObjectURL(file);
    // 該当indexを持つimgタグがあれば取得して変数imgに入れる(画像変更の処理)
    if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
      img.setAttribute('image', blobUrl);
    } else {  // 新規画像追加の処理
      $('#previews').append(buildImg(targetIndex, blobUrl));
      // fileIndexの先頭の数字を使ってinputを作る
      $('#image-box').append(buildFileField(fileIndex[0]));
      fileIndex.shift();
      // 末尾の数に1足した数を追加する
      fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
    }
  });

  $('#image-box').on('click', '.js-remove', function() {
    const targetIndex = $(this).parent().data('index')
    // 該当indexを振られているチェックボックスを取得する
    const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`);
    // もしチェックボックスが存在すればチェックを入れる
    if (hiddenCheck) hiddenCheck.prop('checked', true);

    $(this).parent().remove();
    $(`img[data-index="${targetIndex}"]`).remove();

    // 画像入力欄が0個にならないようにしておく
    if ($('.js-file').length == 0) $('#image-box').append(buildFileField(fileIndex[0]));
  });
});

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick
  process resize_to_fit: [100, 100]
  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog
  
  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

application.jp

//= require activestorage

//= require jquery
//= require jquery_ujs
//= require_tree .

Gemfile

gem 'carrierwave'
gem 'mini_magick'

gem 'jquery-rails'
gem 'jquery-ui-rails'

試したこと

https://qiita.com/jkr_2255/items/ba6bfc59457ea12a76ff

Qiitaにあった記事を参考に”Turbolinks”に問題があるのでは？
と思いましたが、具体的な解決法には至りませんでした。

javascriptにの書き方に問題がある気はするのですが、どうでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

javascriptにの書き方に問題がある気はする

src属性ですね。

javascript
1//const html = `<img data-index="${index}" image="${url}" width="100px" height="100px">`;
2const html = `<img data-index="${index}" src="${url}" width="100px" height="100px">`;
3
4//img.setAttribute('image', blobUrl);
5img.setAttribute('src', blobUrl);