画像プレビュー機能の実装

##railsでの画像プレビュー機能の実装

環境
Rails 5.2.4.4

前提
userテーブルにimage_idカラム

手順
①image_tagにidを与える
JavaScriptで処理するためにidを与える。
ここではid: "img_prev" とする。

<%= attachment_image_tag @user, :image, size: "300x300", fallback: "no_profile.jpg", size: "300x300" , id: "img_prev"%>

②同ページの下部にJavaScriptの記述をする
画像ファイルフィールドの値が変化したときに、
image_tagで画像ファイルのURLを読み込み、画像を表示をする。

<script>
$(function(){                                         
    $('#user_image').on('change', function (e) {        #idからの情報取得
    var reader = new FileReader();　　　　　　　　　　　　#既存の画像urlの取得
    reader.onload = function (e) {
        $(".image").attr('src', e.target.result);
    }　　　　　　　　　　　　　　　　　　　　　　　　　　　　#ここまでが画像取得のため
    reader.readAsDataURL(e.target.files[0]);　　　　　   #取得したurlにアップロード画像のurlを挿入
});
});

</script>

以上で画像プレビュー機能の実装ができた。