

ヘッダーにまとめた画像を、どのページに遷移しても表示できるようにしたい。

RubyでWebアプリケーションを作成しています。  
部分テンプレートを用いて_header.html.erbを作成してところ、トップページを離れると画像が表示されません。  
ブラウザ上のエラーは出ていません。

例.ActionController::RoutingError (No route matches [GET] "/css/style.css"):

同様のエラーがターミナル上で画像数分確認されます。

各viewでは `<%= render "shared/header" %>` で部分テンプレートを呼び出しています。

よろしく願いします。

### 該当のソースコード

_header.html.erb

[code]

    <!doctype html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <div class="title">
    <% if user_signed_in?%>
      <h2><%= link_to current_user.nickname %></h2>
      <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
    <% else %>
      <h2></h2>
      <%= link_to "新規登録", new_user_registration_path %>
      <%= link_to "ログイン", new_user_session_path %>
    <% end %>
    </div>
    
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>今日のトレーニング</title>
    <link rel="stylesheet" media="all" href="css/ress.min.css" />
    <link rel="stylesheet" media="all" href="css/style.css" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/style.js"></script>
    
    <!-- Favicon -->
    <link rel="icon" type="assets/png" href="assets/favicon.png">
    
    </head>
    <body>
    <header>    
    <div class="container">
    <div class="row">
        <div class="col span-12">
        <div class="head">
            <h1><%= link_to "training diary", root_path %></h1>
            <div class="snsbox">
                <img src="assets/in-icon.png" alt="Instagram">
                <img src="assets/fb-icon.png" alt="Facebook"></div>
            </div>
        </div></div>
    
    <div class="row">
        <div class="col span-12">
            <nav>
                <div id="open"></div>
                <div id="close"></div>   
                <div id="navi">
            <ul>
                <li><%= link_to "ホーム", root_path %></li>
                <li><%= link_to "今日のトレーニング", new_main_path %></li>
    
    
                </ul>
                    </div>
            </nav>
        </div>
            </div>
        </div>
    
[/code]


CC BY-SA 4.0
2021-08-30T03:26:20.963
81108
2021-09-02T02:24:18.770
2021-08-30T03:39:40.693
3060
47973
question
ruby html
部分テンプレートにまとめた画像を、トップページ以外でも表示できるようにしたい


imgのsrcが相対パスを指定されているので、トップページと子の階層ページではアクセス先が変わります

以下の例の場合

[code]

    <img src="assets/in-icon.png" alt="Instagram">
    
[/code]

`http://example.com` の場合  
=> `http://example.com/assets/in-icon.png` にアクセス

`http://example.com/mains` の場合  
=> `http://example.com/mains/assets/in-icon.png` にアクセス

となり、アクセス先が変わります

先頭にスラッシュをつけて絶対パスとしてください。トップパスからのアクセスとなります

[code]

    <img src="/assets/in-icon.png" alt="Instagram">
    <img src="/assets/fb-icon.png" alt="Facebook">
    
[/code]


CC BY-SA 4.0
2021-09-01T05:38:50.243
81153
2021-09-02T02:24:18.770
2021-09-02T02:24:18.770
298
298
81108
answer