jsで背景画像をスライド、切り替えしたい

Question

このコードのgithub

前提・実現したいこと

jsを用いて、背景画像を切り替えをしたい

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

おそらく画像の読み込みが上手く行ってなくて

上記のようなエラーが出ます

画像のパスの指定や、設置は上手くいってると思うのでなぜこのエラーが出るのか分かりません

画像のアドレスを指定すれば上手く表示されるのですが、

$(function() {
  var i = 1;
  setInterval(function() {
    if(i > 3) i = 1;
    $("#slideshow").css("background-image","url('/app/assets/images/coffee"+i+".jpg')");
    i++;
    }, 1000
  );
});

このようなコードだと、アドレスでは機能しません、、、。
()

該当のソースコード

views/shared/_form.html.erb

<div id="slideshow">
<div class="registration-main">

<%= form_with model: @user, local: true do |f| %>

<div class='form-wrap'>
  <div class='form-header'>
    <h1 class='form-header-text'>
      会員情報入力
    </h1>
  </div>
    <% flash.each do |message_type, message| %>
      <div class="alert-<%= message_type %>"><%= message %></div>
    <% end %>
  <%= render 'shared/error_messages', object: f.object %>
 
  <div class="form-groups">
    <div class="form-group">
      <div class='form-text-wrap'>
        <label class="form-text">ニックネーム</label>
        <span class="indispensable">必須</span>
      </div>
      <%= f.text_area :nickname, class:"input-default", id:"nickname", placeholder:"例) セイレーン", maxlength:"40" %>
    </div>
    <div class="form-group">
      <div class='form-text-wrap'>
        <label class="form-text">プロフィール画像を設定</label>
        <span class="indispensable">任意</span>
      </div>
      <%= f.file_field :image, class:"input-default" %>
    </div>
    <% unless current_user && logged_in?%>
    <div class="form-group">
      <div class='form-text-wrap'>
        <label class="form-text">メールアドレス</label>
        <span class="indispensable">必須</span>
      </div>
      <%= f.email_field :email, class:"input-default", id:"email", placeholder:"PC・携帯どちらでも可", autofocus: true %>
    </div>
    <div class="form-group">
      <div class='form-text-wrap'>
        <label class="form-text">パスワード</label>
        <span class="indispensable">必須</span>
      </div>
      <%= f.password_field :password, class:"input-default", id:"password", placeholder:"6文字以上の半角英数字" %>
      <p class='info-text'>※英字と数字の両方を含めて設定してください</p>
    </div>
    <div class="form-group">
      <div class='form-text-wrap'>
        <label class="form-text">パスワード(確認)</label>
        <span class="indispensable">必須</span>
      </div>
      <%= f.password_field :password_confirmation, class:"input-default", id:"password-confirmation", placeholder:"同じパスワードを入力して下さい" %>
    </div>
    <% end %>
  </div>

  <div class='register-btn'>
    <% if current_user && logged_in? %>
      <%= f.submit "更新",class:"register-red-btn"%>
    <% else %>
       <%= f.submit "会員登録" ,class:"register-red-btn" %>
    <% end %>
  </div>

  <% unless current_user?(@user) %>
    <div class="signin">
      <p>アカウントをお持ちですか？</p>
      <%=link_to "ログインする",login_path, class: "signin-path"%>
    </div>
  <% end %>

  <p class='register-info'>本人情報の登録について</p>

</div>

<% end %>
</div>
</div>

#slideshow{
  width: 100%;
  height: 100%;
  //background-image: url("/app/assets/images/coffee1.jpg");
}

試したこと

jpg形式の保存を試みた。

アドレスだと上手く表示されるので、

$(function() {
  var i = 1;
  setInterval(function() {
    if(i > 3) i = 1;
    $("#slideshow").css("background-image","url('画像のアドレス')");
    i++;
    }elseif (i = 2){
    $("#slideshow").css("background-image","url('画像のアドレス')");
    i++;
    }elseif(i = 3){
    $("#slideshow").css("background-image","url('画像のアドレス')");
    i++;
    }
  );
});

とか、やって見ましたが、jsの記法にそこまで詳しくないで、構文エラーが出てしまいました。

一番いいのは、jpg画像がしっかりと表示されることなのですが、、、。

また、cssで

#slideshow{
  width: 100%;
  height: 100%;
  background-image: url("/app/assets/images/coffee1.jpg");
}

で、vscodeでコマンドキーを押しながら、("/app/assets/images/coffee1.jpg")
をクリックしたら、しっかりその画像が表示されたのですが、
開発環境のブラウザには反映されてませんでした。。。

cssも,画像アドレスを指定すれば表示されるのでよく分かりません。。。

vscodeでコマンドを押しながら("/app/assets/images/coffee1.jpg")
をクリックしたらその画像が表示されるということはパスの指定は間違ってないはずなのですが、、、

Comments

[mattari_panda]

こちらではディレクトリ構成がわからないので、まずはローカルサーバー上のディレクトリにきちんと画像があるかどうか調べてみてはいかがでしょうか？
https://localhost:3000/app/assets/images/
ここに画像があるかどうか、そもそも/images/のディレクトリがあるかどうかです。

[divclass123]

ご回答ありがとうございます！
ディレクトリ構成はしっかりとしていると自分では思ってます、、！
そのような疑問が来ると予想していたので、githubも載せさせていただきました！

一応jqueryのライブラリ？を使うことで背景のスライドを実現できました
引き続きよろしくお願いします。

Answer 1

https://urashimablog.com/2019/07/13/%E4%B8%80%E7%95%AA%E5%88%86%E3%81%8B%E3%82%8A%E3%[…]9A%84%E3%81%AB%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B/

大学生うらしまブログ大学生うらしまブログ
[レスポンシブ対応]背景画像をスライドショーできるプラグインjQuery.BgSwitcher | うらしまブログ
簡単!!背景画像をスライドショーできるプラグイン「jQuery.BgSwitcher」の使い方を紹介します。レスポンシブにも対応しています。
2019年7月13日