アップロード前の画像をプレビューする際に画像が表示されない

Question

お世話になっています。
現在画像投稿機能を実装していて、投稿する写真のファイルを選択したらそれがプレビューで見れるように実装したいのですが下記のように写真のファイル名だけが表示されてしまいます。

上記の状態で保存した後や別のファイルではimage_tagはちゃんと使えていて画像が表示できているのですがこの部分だけなぜかこうなってしまいます。
アップロード前の画像だとフォルダ内に参照するファイルがない為このようになってしまうのでしょうか？
それとも単純にimage_tagの構文が間違っているのかと思い調べてみたのですがあまり出てきませんでした。
該当のhtmlとjavascriptのコードを下記にてんぷしてるのでアドバイスか参考になるサイトを教えていただけるとありがたいです。

<%= form_with model: [@store, @item], local: true do |f| %>
    <%= f.hidden_field :store_id, value: @store.id %>
    <div>
      <%= f.file_field :image, class: "item-image" %>
        <% if @store.items.name.present? %>
          <%= image_tag @item.image.to_s, onClick: "$('.item-image').click()", class: "img_prev" %>
        <% else %>
          <%= image_tag "./public/images/600px-No_image_available.svg.png" %>
        <% end %>
    </div>
    <div>
      <%= f.text_field :name, placeholder: "アイテム名を入力してください", class: "item-name" %>
    </div>
    <div>
      価格<%= f.text_field :price, class: "item-price" %>円
    </div>
    <div>
      <%= f.submit "保存" %>
    </div>
  <% end %>

$(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.readAdDataURL(input.files[0]);
    }
  }

  $('.item-image').change(function () {
    readURL(this);
  });
});

Answer 1

application.html.erbにて下記のコードを書いていなかった為そもそもJavaScriptが読み込まれていませんでした。下記のコードを追加したらとりあえずプレビュー機能として動くようになりました。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>