ajaxでimg画像のurlを取得し、画像表示させたい（rails js jquery ajax）

前提・実現したいこと

ajaxを使用してモーダル発火時にランダムに商品情報を表示させたい。

attrを使ってurlを結合させてたいのですが、refileを使用して登録された画像のurlの取得方法がわからないです。

該当のソースコード

ruby
1<div id="overlay">
2	<div id="result">
3		<h2>discover new music</h2>
4			<div id="content-title"><a href=""></a></div>
5			<div id="content-image"><img src=""></div>
6			<%#= link_to @random_product.product_title, @random_product, id: "content-title" %>
7			<%#= attachment_image_tag @random_product, :image, :fill, 300, 300, format: 'jpeg', id: 'content-image', fallback: 'img/no_image.png', size: '300x300' %>
8		<button id="close">X</button>
9	</div>
10</div>

js
1<script>
2	$(function(){
3		$(document).on('click', '#rock,#pop,#punk', function(){
4			$.ajax({
5				type:'GET', 
6				url:'/api/json_top', 
7				dataType: 'json', 
8			})
9			.done(function(data){
10				console.log(data.id);
11				console.log(data.image);
12				$('#content-title,#content-image').empty(); 
13				$('#overlay,#result').fadeIn();
14				$('#content-title a').attr('href', '/products/' + 'data.id');
15				$('#content-image img').attr('src', 'data.image');
16				$(document).on('click', '#overlay,#close', function(){
17					$('#overlay,#result').fadeOut();
18					$(document).on('click', '#result', function(e){
19					e.stopPropagation(); 
20					});
21				});
22			})
23
24			.fail(function(){
25				alert('fail')
26			});
27		});
28	});

class Api::RootsController < ApplicationController
  def top
  	@random_product = Product.order("RANDOM()").first
  	render :json => {
  		id: @random_product.id,
  		image: @random_product.image_id
  	}
  end
end

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

回答1件

まず、「何度も起きるイベント中にイベント登録処理をしない」方向に書き換えてください。
（もしくは適切にイベントを削除してください）
下記部分は$(document).on('click', '#rock,#pop,#punk', function(){/*略*/});から外に出してください。

js
1$(document).on('click', '#overlay,#close', function(){
2    $('#overlay,#result').fadeOut();
3    $(document).on('click', '#result', function(e){
4    e.stopPropagation(); 
5    });
6});
7```↓
8```js
9$(document).on('click', '#overlay,#close', function(){
10    $('#overlay,#result').fadeOut();
11});
12$(document).on('click', '#result', function(e){
13    e.stopPropagation(); 
14});

画像については、data.imageにURLが入っているなら下記の様に書き換えてください。また、data.imageにファイル名だけしか入っていない場合は、httpからのフルパスになるように調整してください。

js
1// $('#content-image img').attr('src', 'data.image');
2//                                     ↓         ↓
3   $('#content-image img').attr('src', data.image );