railsで画像が表示されない
解決したいこと
railsでアプリケーションを作っており、そのhome画面にて画像が表示されないので質問しました。
発生している問題・エラー
Failed to load resource: net::ERR_FILE_NOT_FOUND
htmlからrubyに書き換えている途中です。
最初の<%= image_tag('reichan.png')%> ができない状態です。
後の画像はまだerbに書き換えていません。
該当するソースコード
index.html.erb
<section class="top-keyVisual">
<div class="top-keyVisual_container">
<div class="top-keyVisual_heading">
<div class="top-keyVisual_inner heading-inner flexbox">
<h1 class="top-keyVisual_title">
<span class="top-keyVisual_copy color-main">あなたの色を見つけよう</span>
<span class="top-keyVisual_lead">気軽に相談してみよう</span>
</h1>
<div class="top-keyVisual_img">
<%= image_tag('reichan.png')%>
</div>
</div>
</div>
<div class="top-register">
<div class="top-register_inner">
<div class="top-register_card flexbox">
<div class="row top-cards">
<div class="col s12 m6">
<div class="card blue-grey darken-1 top-card">
<a class="waves-effect waves-light btn-large test-login">テストログイン</a>
<a class="waves-effect waves-light btn-large start-now">今すぐはじめる</a>
<div class="card-action">
<a href="#" class="card-custom">みのいろとは？（お客様向け）</a>
<a href="#" class="card-custom minoiro">みのいろとは？（カラーコンサルタント向け）</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="top-feature">
<div class="top-container">
<div class="top-container_heading heading">
<h2>
<span class="heading-copy">お客様とカラーコンサルタントを繋ぐサービス</span>
</h2>
<p class="heading-support">日々の悩みを色でコンサルティングしてもらおう</p>
</div>
<!-- 大枠-->
<div class="top-container_body">
<!--中枠-->
<div class="top-container_item grid img_left">
<div class="row">
<div class="col s12 m6">
<div class="card triple-cards">
<div class="card-image">
<%= image_tag "/img/clock.png" %>
</div>
<div class="card-content">
<span class="card-title">即日取れるカウンセリング予約</span>
<p>最短1時間後から予約可能。「今、コンサルしたい」時にもご利用いただけます。</p>
</div>
</div>
</div>
</div>
</div>
<!--middle-->
<div class="top-container_item grid img_middle">
<div class="row">
<div class="col s12 m6">
<div class="card triple-cards">
<div class="card-image img-resize">
<img src="/img/online_illust.png" height="300px">
<img src="/img/offline_illust.png">
</div>
<div class="card-content">
<span class="card-title">オンライン・オフラインに対応</span>
<p>まずはオンラインで、気に入ればカフェや自宅などで気軽にコンサルテーションできます。</p>
<p class="small-text">※交通費やカフェ代はお客様負担となります。</p>
</div>
</div>
</div>
</div>
</div>
<!--right-->
<div class="top-container_item grid img_right">
<div class="row">
<div class="col s12 m6">
<div class="card triple-cards">
<div class="card-image">
<img src="/img/reasonable_illust2.png" height="300px">
</div>
<div class="card-content">
<span class="card-title">リーズナブル</span>
<p>今まで手の届かなかったカラーコンサルティングがなんと1000円から4500円の間で受けることができます。</p>
<p class="small-text">※障害者手帳をお持ちの方は半額割引となります。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="popout-screen">
<ul class="collapsible popout">
<li>
<div class="collapsible-header">
<img src="/img/colorbottole.png" height="30px">
カラーコンサルティング（オーラソーマ）とは？
</div>
<div class="collapsible-body">
<span>オーラソーマとは、1983年にイギリスのヴィッキー・ウォールが創始したカラーセラピーです。</span>
<img src="/img/bottles.jpg" width="1000px" height="500px">
<br>
<a class="waves-effect waves-light btn bottle_select">ボトルを４本選ぶ</a>
</div>
</li>
</ul>
</div>
</section>
<section class="top-case">
<div class="top-container">
<div class="top-container_heading heading">
<h2>
<span class="heading-copy">例えばこんなお悩みありませんか？</span>
</h2>
</div>
<div class="top-case_body">
<div class="row">
<div class="col s12 m10">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">
職場の人間関係
<i class="fas fa-exclamation-triangle"></i>
</span>
<p>職場の人間関係が悪く会社に行きたくない。辞めるわけにもいかず、将来を考えると不安で仕方ない。</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m10">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">
恋愛
<i class="fas fa-exclamation-triangle"></i>
</span>
<p>恋人とうまくいっていない。喧嘩が多く、今の人と一緒にいていいのか考えると落ち込む。</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m10">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">
人生
<i class="fas fa-exclamation-triangle"></i>
</span>
<p>自分に自信が持てない。人と話もうまくできず、相手の気持ちばかり気になってしまう。</p>
</div>
</div>
</div>
</div>
</div>
<i class="large material-icons arrow">arrow_drop_down</i>
<div class="top-container_under_wrapper">
<h2>
<span class="under-copy">みのいろが解決します</span>
<i class="fas fa-lightbulb"></i>
</h2>
</div>
</div>
</section>
<section class="top-conversion">
<div class="top-container_heading heading">
<h2>
<span class="heading-copy">
まずは無料登録から
<span class="sp-block">はじめよう</span>
</span>
</h2>
<p class="top-conversion-text">
障害者手帳をお持ちの方は半額キャンペーン実施中!
</p>
<div class="top-conversion_buttons">
<a class="waves-effect waves-light btn-large free-btn">無料ではじめる</a>
<a href="#" class="card-custom minoiro2">みのいろとは？（お客様向け）</a>
<a href="#" class="card-custom minoiro">みのいろとは？（カラーコンサルタント向け）</a>
</div>
</div>
</section>
<div class="under-wrapper">
<h3>人気のセラピスト一覧</h3>
<h3>おすすめブログ</h3>
</div>
自分で試したこと
①rake assets:precompileをした
②config/environment/production.rbのconfig.assets.compile=falseをtrueにした
③sassでも画像の埋め込みにtryしてみた
よろしくお願い致します。
0
