/plans/<%= @plans.copy_image %>
という名前のファイルを読み込もうとしてエラーになっています。
JavaScript に直接Rubyの式を埋め込むことは出来ませんので、HTML (ERB) で、以下のようにJSONを埋め込みます。
<script type="application/json" id="image-data">
<%= @some_array.to_json.html_safe %>
</script>
スクリプト側で、
const files = JSON.parse(document.getElementById("image-data").textContent);
のように読み込んでみてください。
他にも
- サーバ側で出力するJSON (等) をJavaScriptから読み込む (いわゆるAJAX)
- サーバ側で動的にJavaScriptを生成して、それをscriptタグで読み込む
- そもそもHTMLに含まれる画像のパスと同じであれば、わざわざJSONを読み込まずHTMLから取得するのも手です。
などの方法があります。
追記
スクリプト側のコードは、どの位置に配置すればよろしいでしょうか?
JSONのデータはView側の任意の位置に配置してください。(HTML内に出力されていればどこでも良いです)
HTMLから取得する方法とはどういう方法でしょうか?
たとえば、対象となる img
に test
というクラス名を付けて、
const files = Array.prototype.map.call(document.getElementsByClassName("test"), (e) => e.getAttribute("src"))
としてください。第2引数はアロー関数と呼ばれるもので、この場合は
const files = Array.prototype.map.call(document.getElementsByClassName("test"), function(e) {return e.getAttribute("src")})
と等価です。Array.prototype.map.call
を呼んでいるのは、getElementsByClassName
で得られるのが Array
ではなく HTMLCollection
のためです。