Adding a logo image to bootstrap navbar in rails

Question

I have found similar questions to this but I can't seem to get this issue fixed. I am working on my first app with rails & bootstrap. I have managed to create a navbar, with a name and two buttons ( see screenshot here ). Now, I am trying to add a logo to the left of the "navbar" but as you can see when I run it locally, the image is not loading.

What I have tried:

First, I tried referencing the pathname of my image directly in my code, that did not work.

Now I have added the path to my logo image to app/assets/images as logo.png and then referenced this in my code:

   <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>

If anyone could point me in the right direction, I would greatly appreciate it!

Thank you in advance.

Answer 1

I replicated your code and is working fine: screenshot

I putted the logo.png on app/assets/images/ and used the same code you posted on application.html.erb. Check if the image name is right and is a valid file.

Another solution :

If you don't mind to use the asset pipeline, you can just create an public/images folder and load the image using something like:

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

Answer 2

You can use 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>

For path don't put https://localhost:3000