[Rails] CarrierWaveで画像のプレビュー機能の実装方法

#前提
RailsでCarrierWaveを使って画像投稿機能が実装されていること。
CarrierWaveの実装方法

#画像ファイルにidを追加する
Javascriptで処理するときに使うので、画像ファイルにidを追加します。

<%= f.label "ユーザー画像" %>
<%= f.file_field :image, id: :user_img %>

#画像を表示させる

画像を表示させるコードを追記します。こちらも、Javascriptで処理するときに使うので、画像ファイルにidをつけておきましょう。
また、画像を選択している時としていない時の表示をif文で分けます。

<% if @user.image.present? %>
  <%= image_tag @user.image, id: :img_prev %>
<% else %>
  <%= image_tag "user_default.png", id: :img_prev %>
<% end %>

#Javascriptに追記する
jsファイルにJavascriptを追記します。
jQueryを使えるようにする

document.addEventListener("turbolinks:load", function() {
  $(function() {
    function readURL(input) {
        if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
    $('#img_prev').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
        }
    }
    $("#user_img").change(function(){
        readURL(this);
    });
  });
})

　参考にしたサイト