如何在haml咖啡脚本文件中包含图像

Question

好的，我对 HAML 和 Coffeescript 都是新手……所以请多多包涵……

假设你有这个：

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

您想在@full_name 旁边添加一张图片，您是这样做的吗？

    %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) 图片不显示

b) 在我添加 image_path 之前存在的人员列表，好吧，他们消失了！

但是如果我删除image_path，那么人员列表会再次出现...

我在这里做错了什么？

编辑

嗯...如果我有这个：

%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

然后字体很棒的图标就会出现...

但如果我试试这个：

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

没有图像显示。记录一下，图片路径是准确的。

我在这里做错了什么？

编辑 2

图片的目录路径：app/assets/images/layout/small.jpg

编辑 3

HAML 文件的目录路径：app/javascript/templates/contacts/contact.hamlc

编辑 4

Indentation error in line 2

但它出于某种原因突出显示了 javascript_include_tag ...

  %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

编辑 5

出于测试目的，这是可行的：

%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

试试这个：

%img("layout/small.jpg")

或者，您也可以使用旧的和更详细的形式：

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

我看到您正在使用 Rails，因此您也可以尝试将原始 image_tag 编辑为：

=image_tag "layout/small.jpg"

您可能会注意到“=”符号和“image_tag”之间没有空格。