前提・実現したいこと
- bootstrapのcardを使ってユーザー情報をページに表示したい
Rails6でオリジナルアプリを開発しています。
bootstrapで全体の見た目を作っていますが、cardを使ってトップページにユーザーの画像やプロフィール情報を反映させようとhtml.erbを編集したところ、ブラウザに編集内容が表示されません。エラーメッセージも出ていません。下記解決にご協力いただけますと幸いです。
発生している問題・エラーメッセージ
・編集したerbの内容がブラウザに表示されない ・エラーメッセージ:なし
該当のソースコード
html
1<% if @users.present? %> 2 <% @users.each do |user| %> 3 <div class="card flex-sm-md-lg-xl-fill bd-highlight" style="width: 18rem;"> 4 <%= image_tag user.image, class:"bd-placeholder-img card-img-top", width:"100%", height:"180" %> 5 <ul class="list-group list-group-flush"> 6 <li class="list-group-item"><%= user.nickname %></li> 7 <li class="list-group-item"><%= user.genre %></li> 8 </ul> 9 <div class="card-body"> 10 <p class="card-text"><%= user.profile %></p> 11 </div> 12 <div class="card-body"> 13 <a href="#" class="card-link">Users page</a> 14 <a href="#" class="card-link">Like</a> 15 </div> 16 </div> 17 <% end %> 18 <% end %>
###上記の元になったbootstrapのソースコード(表示確認済み)
html
1<div class="card flex-sm-md-lg-xl-fill bd-highlight" style="width: 18rem;"> 2 <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">User image</text></svg> 3 <ul class="list-group list-group-flush"> 4 <li class="list-group-item">User name</li> 5 <li class="list-group-item">User genre</li> 6 </ul> 7 <div class="card-body"> 8 <p class="card-text">User profile</p> 9 </div> 10 <div class="card-body"> 11 <a href="#" class="card-link">Users page</a> 12 <a href="#" class="card-link">Like</a> 13 </div> 14 </div>
試したこと
- '='がERBテンプレートからから抜けていないか確認
- 該当ページに関連する
controller.rb
内で@user
を正しく定義できているか確認 - 元のソースコードと各要素のクラス名が合っているか確認
rails s
でサーバーを再起動
補足情報(FW/ツールのバージョンなど)
- 環境
Rails: 6.0.0
Ruby: 2.6.5
Bootstrap: 4.5
OS: macOS catalina 10.15.6
- その他
元のソースコードや同ページのヘッダー、フッター、カルーセルなどはブラウザで問題なく表示されていましたので、bootstrapは導入できていると思われます。
あなたの回答
tips
プレビュー