[英]how to include an image in haml coffeescript file
Ok, I'm new to all things HAML and Coffeescript ... so please bear with me ... 好的,我对HAML和Coffeescript都是陌生的,所以请耐心等待...
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? 您想在
@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) image doesn't show up a)图像不显示
b) the list of people that existed there before I added the image_path, well, they disappear! b)在我添加image_path之前存在的人员列表,好吧,他们消失了!
But if I remove the image_path
, then the list of people appears again ... 但是,如果我删除
image_path
,则人员列表会再次出现...
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 ... 然后出现fontawesome图标...
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 编辑2
Directory path for image: app/assets/images/layout/small.jpg 图片的目录路径:app / assets / images / layout / small.jpg
EDIT 3 编辑3
Directory path for HAML file: app/javascript/templates/contacts/contact.hamlc HAML文件的目录路径:app / javascript / templates / contacts / contact.hamlc
EDIT 4 编辑4
Indentation error in line 2
But it highlights javascript_include_tag for some reason ... 但是由于某种原因,它突出显示了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
EDIT 5 编辑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
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: 我看到您正在使用Rails,因此也可以尝试将原始image_tag修改为此:
=image_tag "layout/small.jpg"
You may notice that there is no space between the "=" sign and the "image_tag". 您可能会注意到,“ =”符号和“ image_tag”之间没有空格。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.