JavaScriptで画像のスライドショー機能を実装したい

Question

Rails6でJavaScriptを使った画像のスライドショー機能を実装中です！

Webサイトのトップページで画像のスライドショーを実装させたいのですが、エラーが出てしまい詰まって先に進めません。
ブラウザ上で挙動を確認するとスライド機能自体はできていて画像の表示ができていない感じです！
アドバイスをいただけると嬉しいです！

発生している問題・エラーメッセージ

index.self-b07f4a9b963218fdfa919b43235a31872166c4b7e78b518599220e11d5e64154.css:1 GET http://localhost:3000/images/furima-header02.png 404 (Not Found)

該当のソースコード

window.addEventListener('load', function(){
const pics_src = ["images/meshiagare.jpg","images/meshiagare.top03.png","images/meshiagare.top02.jpg"];
let num = -1;
 
 
function slideshow_timer(){
  if (num === 2){
    num = 0;
  } 
  else {
    num ++;
  }
  document.getElementById("mypic").src = pics_src[num];
}
 
setInterval(slideshow_timer, 3000);
})

<img id="mypic" data-src="images/meshiagare.jpg" width="100px" height="90px" class="slider">

試したこと

画像の格納先はapp/assets/imagesディレクトリに入ってます。最初は画像のファイル名だけしか指定していなかったのでディレクトリをしていしてみようと思い、images/を付けましたが変化なしでした。

補足情報

画像自体はJavaScriptを使わなければ、普通に表示されました。
初心者なので質問内容が伝わらない可能性がありますが、宜しくおねがいします！

Answer 1

スライドショーに利用する画像をapp/public/images/に移動するのがシンプルな解決方法となります。

app/assets/以下のファイルはアセットパイプラインの対象となり、呼び出す際のURLが実際のディレクトリ構造と異なるためです。

詳しくは下記もしくはRailsガイド：アセットパイプラインをご確認いただくと良いかと思います。

もし、同じアプリケーション内で JavaScript を利用しており、JavaScript 内で画像を扱うのであれば、app/assets/images ディレクトリの画像はフィンガープリントが付いてしまうので（画像の URL が変わってしまうので）扱いにくいです。

https://techblog.kyamanak.com/entry/2017/10/13/003818

Comments

[max3252]

ご回答ありがとうございます！
無事に表示され動きました！
Railsガイド勉強します！

[no1knows]

それは良かったです！