css - 如何在 ruby​​ on rails 上基于 Bootstrap 的导航栏中显示图像

Question

我想在 ruby​​ on rails 中基于 Bootstrap 的导航栏左侧放置一个图像。我的图像不显示。我想我没有很好地引用链接。我怎样才能解决这个问题？图片在app/assets/images/logo.png

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="http://www.internsgopro.com">
          <img id="navbar-logo" class="img-responsive" src="images/logo.png" alt="internsgopro logo">
        </a>
        <button type="button" class="navbar-toggle collapsed"
          data-toggle="collapse" data-target="#collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

      </div>


      <div class="collapse navbar-collapse" id="collapse">
        <ul class="nav navbar-nav">
          <li class="<%= "active" if current_page?("/") %>">
            <%= link_to "Find Internships", offers_path %>
          </li>
        </ul>

        <ul class="nav navbar-nav">
          <li class="<%= "active" if current_page?("/") %>">
            <%= link_to "Best Employers", employers_path %>
          </li>
        </ul>

        <ul class="nav navbar-nav">
          <li class="<%= "active" if current_page?("/") %>">
            <%= link_to "Internship Reviews", reviews_path %>
          </li>
        </ul>

        <ul class="nav navbar-nav">
          <li class="<%= "active" if current_page?("/") %>">
            <%= link_to "Get the label", reviews_path %>
          </li>
        </ul>

        <ul class="nav navbar-nav">
          <li class="<%= "active" if current_page?("/") %>">
            <%= link_to "About us", reviews_path %>
          </li>
        </ul>

      </div>


    </div>
  </nav>

Answer 1

您应该在 html 中按如下方式使用 image_tag:

<%= image_tag("logo.png", class: "img-responsive", id: "navbar-logo") %>

代替:

<img id="navbar-logo" class="img-responsive" src="images/logo.png" alt="internsgopro logo">

在你的 :

<a class="navbar-brand" href="http://www.internsgopro.com"></a>

您也许还应该转换 link_to 标签中的 a 标签。 http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to

如果 Rails 正在加载图像作为您的 Assets 之一，您应该能够在

http://localhost:8000/assets/logo.png

或

http://localhost:3000/assets/logo.png

以下 stackoverflow 讨论和链接中的更多详细信息:

Rails 4 image-path, image-url and asset-url no longer work in SCSS files

http://guides.rubyonrails.org/asset_pipeline.html

http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html#method-i-audio_tag

不幸的是我没有足够的积分来回答评论。

祝你好运 法布里齐奥·贝尔托利奥