minoppp411
@minoppp411 (林 みのり)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

railsで画像が表示されない

解決したいこと

railsでアプリケーションを作っており、そのhome画面にて画像が表示されないので質問しました。

発生している問題・エラー

Failed to load resource: net::ERR_FILE_NOT_FOUND

スクリーンショット 2022-02-14 6.41.28.png

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">ボトルを4本選ぶ</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

2Answer

Your answer might help someone💌