Question

我发现了与此类似的问题，但似乎无法解决此问题。我正在使用Rails和Bootstrap开发第一个应用程序。我已经成功创建了一个导航栏，带有一个名称和两个按钮（see screenshot here）。现在，我正在尝试在“导航栏”的左侧添加徽标，但是如您所见，当我在本地运行该徽标时，该图片未加载。

我尝试过的事情：

首先，我尝试直接在代码中引用图像的路径名，但这没有用。

现在，我已将徽标图像的路径作为logo.png添加到app / assets / images中，然后在我的代码中引用了此路径：

   <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="http://localhost:3000/posts">
        <%= image_tag 'logo.png' %>
        Navbar
      </a>
      <form class="form-inline">
          <button type="button" class="btn btn-light">Sign Up!</button>
        <div style="padding-left: 10px;">
          <button type="button" class="btn btn-dark">Login</button>
        </div>
      </form>
   </nav>

如果有人能指出我正确的方向，我将不胜感激！

谢谢。

Answer 1

我复制了您的代码，并且工作正常： screenshot

我将logo.png放在app / assets / images /上，并使用了与您在application.html.erb上发布的相同的代码。检查图像名称是否正确并且是有效文件。

另一种解决方案：

如果您不介意使用资产管道，则可以创建一个public/images文件夹并使用以下方式加载图像：

<%= image_tag '/images/logo.png' %>

Answer 2

您可以使用link_to：

<nav class="navbar navbar-light bg-light">
  <%= link_to 'Navbar', '/posts', :class=>'navbar-brand' do %> 
    <%= image_tag 'logo.png' %>
  <% end %>
  <form class="form-inline">
    <button type="button" class="btn btn-light">Sign Up!</button>
    <div style="padding-left: 10px;">
      <button type="button" class="btn btn-dark">Login</button>
    </div>
  </form>
</nav>

对于路径，请不要放置https：// localhost：3000

将徽标图像添加到Rails的引导导航栏中

2 个答案: