1

ボタンを押すと画像の動きはあるが、写真が表示されない状態になっています。
画像が表示されるようにしたいと思ってます。よろしくお願いします。

エラー
画像の説明をここに入力

document.addEventListener( 'DOMContentLoaded' , function( e ) {
  'use strict';

  var files = [
    '<%= @plans.copy_image %>',
    '<%= @plans.copy_image %>',
    '<%= @plans.copy_image %>',
    '<%= @plans.copy_image %>',
    '<%= @plans.copy_image %>'
  ];
  
  var currentNum = 0;
  var prev = document.getElementById('prev');
  var next = document.getElementById('next');
  var target = document.getElementById('target');

  prev.addEventListener('click', function() {
    currentNum--;
    if (currentNum < 0) {
      currentNum = files.length - 1;
    }
    target.src = files[currentNum];
  });

  next.addEventListener('click', function() {
    currentNum++;
    if (currentNum > files.length - 1) {
      currentNum = 0;
    }
    target.src = files[currentNum];
  });

}, false );
<div class="main">
    <i class="fas fa-chevron-circle-left" aria-hidden="true" id="prev"></i>
    <img src="<%= @plan.image %>" id="target" style="width: 950px; height: 400px; padding-bottom: 15px; padding-top: 20px; ">
    <i class="fas fa-chevron-circle-right" aria-hidden="true" id="next"></i>
  </div>
  <div class="king">
    <ul class="example">
        <li class="current"><img src="<%= @plan.copy_image %>"></li>
        <li><img src="<%= @plan.copy_image %>"></li>
        <li><img src="<%= @plan.copy_image %>"></li>
        <li><img src="<%= @plan.copy_image %>"></li>
        <li><img src="<%= @plan.copy_image %>"></li>
    </ul>
  </div>
  <script src="javascripts/main.js"></script>

2 件の回答 2

2

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

3
  • スクリプト側のコードは、どの位置に配置すればよろしいでしょうか? Commented 2019年1月9日 12:28
  • HTMLから取得する方法とはどういう方法でしょうか? Commented 2019年1月9日 12:36
  • @some_arrayの場所にこの場合は、画像の@plan.imageと入れればいいでしょうか?そして、const files = JSON.parse(document.getElementById("image-data").textContent);の部分は、var filesの部分を変えて、書けばいいでしょうか?度々質問をして申し訳ありません Commented 2019年1月11日 12:44
0

画像のパスが間違っていることは考えられませんか?

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。