Question

作为一个Rails新手，我遇到了一个我正在努力解决的问题。

我在我的应用程序的四个页面中普遍呈现一个标题，其中包括home，about，（注册和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>

Answer 1

这就是您如何设置徽标路径的问题。绝对或更好地使用image_tag。

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

注意，我在/之前添加了assets（正斜杠）。

更好的方法是：

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

为什么我的通用标题中的徽标在设计中显示为已损坏

1 个答案: