How to show an image in bootstrap based navbar on ruby on rails

Question

I want to place an image on the left in my Bootstrap based navbar in ruby on rails. My image does not show up. I suppose I did not reference the link well. How can I fix this? The image is in 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>

Possible duplicate of [Rails 4 image-path, image-url and asset-url no longer work in SCSS files](http://stackoverflow.com/questions/16843143/rails-4-image-path-image-url-and-asset-url-no-longer-work-in-scss-files) — Ryad Boubaker, Jan 12 '17 at 11:27

score 1 · Answer 1 · edited May 23 '17 at 12:09

You should use the image_tag as follows inside your html:

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

Instead of:

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

inside your :

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

You should maybe also convert the a tag in a link_to tag. http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to

If rails is loading the image as one of your assets you should be able to see it at

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

or

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

Additional more detailed information at the following stackoverflow discussion and links:

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

Unluckily I do not have enough points to answer comments.

Good luck Fabrizio Bertoglio

How to show an image in bootstrap based navbar on ruby on rails

1 Answers1