bxsliderの画像表示が出来ません

\r\n <%= current_user.nickname %>\r\n

\r\n <%= link_to \"マイページ\", \"/users/#{current_user.id}\" %>\r\n <%= link_to \"ログアウト\", destroy_user_session_path, method: :delete %>\r\n

\r\n \r\n <%= link_to \"投稿する\", new_tweet_path, class: \"post\" %>\r\n

\r\n <%= link_to \"ログイン\", new_user_session_path, class: \"post\" %>\r\n <%= link_to \"新規登録\", new_user_registration_path, class: \"post\" %>\r\n

bxsliderの画像表示がしたいです

bxsliderの導入をしようと思いデータをダウンロードしjquery.bxslider.min.jsとjquery.bxslider.cssを配置しHTMLに記述をしましたが、画像の表示が出来ません
style.cssが悪さをしてるのではと思い削除など行いましたが、変化ありません。
また画像の名前も確認しコピペして間違いないと思うのですが表示できませんでした

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

https://gyazo.com/6c51c8409c03ffd0ea89a0d92aef1ee1

application.html

Ruby
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Matsubokkuri</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7
8    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10   
11    <link rel="stylesheet" href="/jquery.bxslider.css">
12    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
13    <script src="/jquery.bxslider.min.js"></script>
14
15    <script>
16      $(document).ready(function(){
17       $('.bxslider').bxSlider({
18        auto: true,
19	    	touchEnabled: false
20       });
21      });
22    </script>
23
24  </head>
25
26  <body>
27  <header class="header">
28      <div class="header__bar row">
29        <h1 class="grid-6"><a href="/">Matsubokkuri</a></h1>
30        <% if user_signed_in? %>
31          <div class="user_nav grid-6">
32           <span><%= current_user.nickname %>
33            <ul class="user__info">
34              <li>
35                <%= link_to "マイページ", "/users/#{current_user.id}" %>
36                <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
37              </li>
38            </ul>
39           </span>
40            <%= link_to "投稿する", new_tweet_path, class: "post" %>
41          </div>
42        <% else %>
43          <div class="grid-6">
44            <%= link_to "ログイン", new_user_session_path, class: "post" %>
45            <%= link_to "新規登録", new_user_registration_path, class: "post" %>
46          </div>
47        <% end %>
48      </div>
49      </header>
50        <ul class="bxslider">
51         <li><img src="../images/coffee1.png" alt="111" width="1400" height="400"></li>
52         <li><img src="../images/coffee2.png" alt="222" width="1400" height="400"></li>
53         <li><img src="../images/coffee3.png" alt="333" width="1400" height="400"></li>
54        </ul>
55    <%= yield %>
56    <footer>
57      <p>
58        Copyright Matsubokkuri 2021.
59      </p>
60    </footer>
61  </body>
62</html>
63

bxslider.js

Ruby
1$(function(){
2  $('.bxslider').bxSlider({
3    mode: 'fade',
4    captions: true,
5    slideWidth: 1400,
6  });
7});

application.html

bxSliderのオプションの「touchEnabled」を「false」にするにしたりしました

補足情報（FW/ツールのバージョンなど）

申し訳ございませんが教えて頂きたいです

行動規範の内容に同意します

回答1件

ベストアンサー

症状の画像を見るとimgを読み込めていないみたいなので、
画像ファイルが存在しないか、パスが間違っているだけのような気がします。

スライダーの外に画像のタグを置いて表示されるか確認してみてください。

投稿2021/03/01 03:35

退会済みユーザー

総合スコア0

oiken3

2021/03/01 04:33

有難うございますご指摘の通りパスが間違っておりました <li><img src="../images/coffee1.png" alt="111" width="1400" height="400"></li>を下記に変更しましたら表示できました <div class="bxslider_slider"><img src="/assets/coffee1.jpg" width="1400" height="400"></div> 本当に有難うございました https://gyazo.com/f46864d946c40c70426df73aa9d1a8fe

行動規範の内容に同意します