

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

エラー  
[![画像の説明をここに入力](https://i.stack.imgur.com/UTwrQ.png)](https://i.stack.imgur.com/UTwrQ.png)

[code]

    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 );
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-01-07T15:02:09.543
51801
2019-01-09T13:06:29.530
30829
question
javascript ruby-on-rails ruby html
javascriptでスライドショーを実装しようとしているが、画像が表示されない


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


CC BY-SA 4.0
2019-01-07T23:38:12.973
51806
2019-01-07T23:38:12.973
29216
51801
answer


`/plans/<%= @plans.copy_image %>` という名前のファイルを読み込もうとしてエラーになっています。

JavaScript に直接Rubyの式を埋め込むことは出来ませんので、HTML (ERB) で、以下のようにJSONを埋め込みます。

[code]

    <script type="application/json" id="image-data">
    <%= @some_array.to_json.html_safe %>
    </script>
    
[/code]

スクリプト側で、

[code]

    const files = JSON.parse(document.getElementById("image-data").textContent);
    
[/code]

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

他にも

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

などの方法があります。

**追記**

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

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

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

たとえば、対象となる `img` に `test` というクラス名を付けて、

[code]

    const files = Array.prototype.map.call(document.getElementsByClassName("test"), (e) => e.getAttribute("src"))
    
[/code]

としてください。第2引数はアロー関数と呼ばれるもので、この場合は

[code]

    const files = Array.prototype.map.call(document.getElementsByClassName("test"), function(e) {return e.getAttribute("src")})
    
[/code]

と等価です。`Array.prototype.map.call` を呼んでいるのは、`getElementsByClassName` で得られるのが
`Array` ではなく `HTMLCollection` のためです。


CC BY-SA 4.0
2019-01-08T12:29:57.950
51823
2019-01-09T13:06:29.530
2019-01-09T13:06:29.530
76
76
51801
answer