Interpolate SASS in HAML for background image: & # 8594; Object in Rails

I am trying to get a background image for a list item to be dependent on which object it is attached to! It should not be too complicated, but I could not figure out how to do this in SASS. Here's my attempt from HAML, because where I will iterate through a collection of different objects:

application / views / Services / index.html.haml

#facility - @facilities.each do |facility| %ul#facilities %li :sass background-image: url(#{image_tag "logos/#{facility.image}.jpg"}) = link_to facility.name, facility_path(facility) 

But the error I am getting is as follows:

Mistake

Invalid CSS after "url(": expected ")", was "<img alt="Thebi..." Arounnd line 6 For one of the generated images.

It can't be that hard ... can it? Any help is appreciated.

+7
source share
2 answers

Do not use sass for this, you will pay a significant decrease in performance for the lack of benefits. Just use the built-in html styles:

 #facility - @facilities.each do |facility| %ul#facilities %li{:style => "background-image: url(#{image_path "logos/#{facility.image}.jpg"})"} = link_to facility.name, facility_path(facility) 
+11
source

You need to remove your image tag.

Your css is currently expanding to:

 background-image: url('<img src=""</img>') 

You must change it to:

 background-image: url("public/images/#{facility.image}.jpg") 

I will have a check to see if there is an assistant for this.

EDIT: image_path helper , so you need:

 background-image: url(#{image_path "logos/#{facility.image}.jpg"}) 
+1
source

All Articles