JavaScriptでhtml文(erb)を記述する場合

Question

###前提・実現したいこと
javascriptの.htmlで<%= image_tag()%>を実装したいのですが、なかなかうまくいきません。

結果は<%= image_tag()%>と表示（ブラウザ上）されてしまいます。

###該当のソースコード

 $(function() {
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body').html( "<%= image_tag(recipient)%>" )
})

###補足情報(言語/FW/ツール等のバージョンなど)
フレームワークにBootstrapを使っています。

Answer 1

この方法では、原理的に不可能です。

というのも、サーバ側でERBを実行→それをクライアント側に転送→クライアント側でJavaScriptを実行、という流れになるので、ERBにJavaScriptの変数を投げて処理、ということがふつうにはできないのです。

なお、イメージのパスを取得するにあたっては、image_pathをJavaScript側に出現させることはできます（Qiita）。

Comments

[sweden1]

ご回答ありがとうございます

[sweden1]

ちなみに
recipientには/123.jpegが入っており
image_path(変数)みたいに
image_path(recipient)
は可能でしょうか？