Skip to main content
質問に回答
ソース リンク
yasu
  • 4,443
  • 3
  • 20
  • 25

/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);

のように読み込んでみてください。

他にも

  1. サーバ側で出力するJSON (等) をJavaScriptから読み込む (いわゆるAJAX)
  2. サーバ側で動的にJavaScriptを生成して、それをscriptタグで読み込む
  3. そもそもHTMLに含まれる画像のパスと同じであれば、わざわざJSONを読み込まずHTMLから取得するのも手です。

などの方法があります。

追記

スクリプト側のコードは、どの位置に配置すればよろしいでしょうか?

JSONのデータはView側の任意の位置に配置してください。(HTML内に出力されていればどこでも良いです)

HTMLから取得する方法とはどういう方法でしょうか?

たとえば、対象となる imgtest というクラス名を付けて、

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 のためです。

/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);

のように読み込んでみてください。

他にも

  1. サーバ側で出力するJSON (等) をJavaScriptから読み込む (いわゆるAJAX)
  2. サーバ側で動的にJavaScriptを生成して、それをscriptタグで読み込む
  3. そもそもHTMLに含まれる画像のパスと同じであれば、わざわざJSONを読み込まずHTMLから取得するのも手です。

などの方法があります。

/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);

のように読み込んでみてください。

他にも

  1. サーバ側で出力するJSON (等) をJavaScriptから読み込む (いわゆるAJAX)
  2. サーバ側で動的にJavaScriptを生成して、それをscriptタグで読み込む
  3. そもそもHTMLに含まれる画像のパスと同じであれば、わざわざJSONを読み込まずHTMLから取得するのも手です。

などの方法があります。

追記

スクリプト側のコードは、どの位置に配置すればよろしいでしょうか?

JSONのデータはView側の任意の位置に配置してください。(HTML内に出力されていればどこでも良いです)

HTMLから取得する方法とはどういう方法でしょうか?

たとえば、対象となる imgtest というクラス名を付けて、

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 のためです。

ソース リンク
yasu
  • 4,443
  • 3
  • 20
  • 25

/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);

のように読み込んでみてください。

他にも

  1. サーバ側で出力するJSON (等) をJavaScriptから読み込む (いわゆるAJAX)
  2. サーバ側で動的にJavaScriptを生成して、それをscriptタグで読み込む
  3. そもそもHTMLに含まれる画像のパスと同じであれば、わざわざJSONを読み込まずHTMLから取得するのも手です。

などの方法があります。