2016-04-25 6 views
1

Railsの初心者のために、私は理解しづらい問題にぶつかっています。ユニバーサルヘッダーのロゴが壊れて表示されるのはなぜですか

私のアプリケーションの4ページに渡ってヘッダーをレンダリングしています。これはhome、about、(devusによって管理されているsignupとsignin)で構成されています。

ヘッダーは家庭とページについては問題ありませんが、ロゴイメージは明確に届いていますが、その他の要素はすべて表示されています。どんな助けもありがとう。

application.html.erb

<!DOCTYPE html> 
<html> 
<head> 
    <title>SampleApp</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %> 
    <%= csrf_meta_tags %> 
    <%= yield :head %> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700|Lobster' rel='stylesheet' type='text/css'> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 

    <%= render 'layouts/header' %> 
    <div class="container"> 
    <% flash.each do |name, msg| %> 
    <%= content_tag(:div, msg, class: "alert alert-#{name}") %> 
    <% end %> 
    <%= yield %> 
    </div> 
    <%= render "layouts/footer" %> 

</body> 
</html> 

_header.html.erb

<nav class="navbar navbar-static-top navbar-default" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="/"> 
     <img alt="Nippon Beauty" class="navbar-brand-icon" src="assets/nippon.svg"><span class="logo-tagline">.CO.UK</span> 
    </a> 
    </div> 

     <input type="text" class="searchTerm" placeholder="What type of Skincare product would you like?"> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Home", root_path %></li> 
     <li><%= link_to "About", about_path %></li> 
     <li><%= link_to "Login", new_user_session_path %></li> 
     <li><%= link_to "Signup", new_user_registration_path %></li> 
     <% if user_signed_in? %> 
     <li><%= link_to "Account Settings", edit_user_registration_path %></li> 
     <li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li> 
     <% else %> 
    <% end %> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 

HEADER

DEVISE HEADER RENDER

+0

'レイアウト/ header'ファイルの内容を追加してください。私はあなたのロゴのパスに問題があると思う。 – Uzbekjon

+0

今... –

+0

部分となることはこれです –

答えて

1

これは、ロゴへのパス設定の問題です。それを絶対的またはより良く使用することimage_tag

<img src="/assets/nippon.svg" ... 

お知らせ、私はassets/(スラッシュ)を追加しました。それをやっての

より良い方法は、次のようになります。

<%= image_tag('nippon.svg', alt: "Nippon Beauty", class: "navbar-brand-icon") %> 
+0

は本当にステアリングを感謝します。時間を割いてくれてありがとう。 –

関連する問題