how to include an image in haml coffeescript file

Question

Ok, I'm new to all things HAML and Coffeescript ... so please bear with me ...

Say you have this:

%li{data-user_id: @id, class: (if @online then 'online' else 'not-online')}
  %a{href: '#'}
    %span.name= @full_name

And you want to include an image next to the @full_name , is this how you do it?

    %li{data-user_id: @id, class: (if @online then 'online' else 'not-online')}
      %a{href: '#'}
        %span.name= @full_name
        = image_path('layout/small.jpg')

a) image doesn't show up

b) the list of people that existed there before I added the image_path, well, they disappear!

But if I remove the image_path , then the list of people appears again ...

What am I doing wrong here?

EDIT

hm ... if I have this:

%li{role: 'presentation', data-user_id: @user_id, class: (if @online then 'online' else 'not-online')}
  %a{role: 'menuitem', href: '#'}
    %span= @full_name
    %i.kind.fa.fa-user

then the fontawesome icon shows up ...

but if I try this:

%li{data-user_id: @id, class: (if @online then 'online' else 'not-online')}
  %a{href: '#'}
    %span.name= @full_name
    %img('layout/small.jpg')

No image shows up. For the record, the image path is accurate.

What am I doing wrong here?

EDIT 2

Directory path for image: app/assets/images/layout/small.jpg

EDIT 3

Directory path for HAML file: app/javascript/templates/contacts/contact.hamlc

EDIT 4

Indentation error in line 2

But it highlights javascript_include_tag for some reason ...

  %link{:href => "//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin", :rel => "stylesheet"}/
   %title Blah
   = stylesheet_link_tag    'application', media: 'all'
   = javascript_include_tag 'application', '//cdn.pubnub.com/pubnub.min.js'
   = favicon_link_tag 'favicon.png'
   = csrf_meta_tags
   / HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries

EDIT 5

For testing purposes, this works:

%li{data-user_id: @id, class: (if @online then 'online' else 'not-online')}
  %a{href: '#'}
  %img{:src => "http://i62.tinypic.com/wvd7hk.jpg"}
    %span.name= @full_name

Answer 1

Try this:

%img("layout/small.jpg")

Alternatively, you can also use the older and more verbose form:

%img{:src => "layout/small.jpg"}

I see that you are using Rails, so you can also try editing your original image_tag to this:

=image_tag "layout/small.jpg"

You may notice that there is no space between the "=" sign and the "image_tag".