「jQuery.BgSwitcher」で画像が取得できない

Question

自分で調べながらいくつか試しましたが、それでも解決できないので質問させて頂きます。

やりたいこと

背景画像を切り替えられるjQueryプラグイン「jQuery.BgSwitcher」を使って背景画像を自動で切り替えられる実装をしたい。

経緯

未経験からエンジニアへの転職を目指しており、転職活動用の個人アプリを作成中です。
食べたものやカロリーなどを投稿するアプリです。
投稿一覧画面の背景画像が自動で切り替わる実装をしているところです。

生じている問題

プラグイン「jQuery.BgSwitcher」を設定する記事を参考にしながら設定してみましたが、画像が表示されません。
ターミナルに以下のエラー文が表示され、ブラウザのデベロッパーツールには添付画像のように404 Not Foundと出てきてしまいます。

ActionController::RoutingError (No route matches [GET] "/images/sven-mieke-optBC2FxCfc.jpg"):
ActionController::RoutingError (No route matches [GET] "/images/Pumphose.muscles.png"):
ActionController::RoutingError (No route matches [GET] "/images/allef-vinicius-do-0ghSDd2E-unsplash.jpg"):

該当のソースコード

application.haml.html

!!!
%html(lang="ja")
  %head  
    %script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js")
    （省略）
    = javascript_include_tag 'jquery.bgswitcher.js': true

_main.haml.html

.bg-slider
    %script
    :javascript
      $(function($){
        $('.bg-slider').bgSwitcher({
          images:['Pumphose.muscles.png', 'allef-vinicius-do-0ghSDd2E-unsplash.jpg', 'sven-mieke-optBC2FxCfc.jpg'],
          //effect: "drop",
          //easing: "linear"
          interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
          loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
          shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
          effect: "blind", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
          duration: 500, // エフェクトの時間を指定します。
          easing: "swing" // エフェクトのイージングをlinear,swingから指定
        });
      });

_main.scss

.bg-slider {
    padding: 10px 20px 10px 20px;
    background-color: #ddd;
    // background-image: url('Pumphose.muscles.png');
    // background-size: contain;
    width: 100vw;
    height: 100vh;
    background-position:center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }

試したこと

下記の画像のpathが間違っているという仮説のもと、いくつかpathを変えてみましたが、うまくいきませんでした。

app/assets/images/Pumphose.muscles.png
app/assets/images/allef-vinicius-do-0ghSDd2E-unsplash.jpg
app/assets/images/sven-mieke-optBC2FxCfc.jpg)

images:['Pumphose.muscles.png', 'allef-vinicius-do-0ghSDd2E-unsplash.jpg', 'sven-mieke-optBC2FxCfc.jpg'],

・../'Pumphose.muscles.png'
・images/'Pumphose.muscles.png'
・app/assets/images/Pumphose.muscles.png

Answer 1

パスの問題のようなので、app-name/public/images/に画像ファイルを移動させ、下記のような形で設定してみてはいかがでしょうか？

images:['/images/Pumphose.muscles.png', '/images/allef-vinicius-do-0ghSDd2E-unsplash.jpg', '/images/sven-mieke-optBC2FxCfc.jpg'],

なぜpublicだと良いのかについては下記を確認いただくとわかりやすいかと思います。
きゃまなかのブログ：【Ruby on Rails】画像は public と app/assets/images のどちらに設置すべき？

Comments

[nao3434]

返信が遅くなってしまい申し訳ありません。ご回答頂きありがとうございます。教えていただいた設定をやってみて、その結果どうなったのかをこちらに書かせて頂きます。お待ちいただければ幸いです。

[nao3434]

教えていただいた通りapp-name/public/images/に画像ファイルを移動させ、pathを変更したところ、無事自動スライドショーが設定できました。
まだ完全に理解し切れていないので、教えていただいた記事を読んで理解を深めたいと思います。
本当にありがとうございました????‍♂️！！