如何在 ruby on rails 上基于引导程序的导航栏中显示图像答案

【问题标题】：How to show an image in bootstrap based navbar on ruby on rails如何在 ruby on rails 上基于引导程序的导航栏中显示图像
【发布时间】：2017-05-27 11:46:17
【问题描述】：

我想在 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>

【问题讨论】：

Rails 4 image-path, image-url and asset-url no longer work in SCSS files的可能重复

标签： css ruby-on-rails twitter-bootstrap

【解决方案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 将图像作为您的资产之一加载，您应该能够在

看到它

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

不幸的是，我没有足够的分数来回答 cmets。

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

【讨论】：