Interpolate SASS in HAML for background-image: -> Object in Rails

Question

I'm trying to have a background-image per list item to be dependent on which object it's linking to! Shouldn't be too hard, but I couldn't figure out how to do it in SASS. Here's my attempt from HAML, because that's where I'll be iterating through a collection of different facilities:

app/views/facilities/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'm getting looks like the following:

error

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

It can't be this difficult...can it? Any help is greatly appreciated.

Answer 1

Don't use sass for this, you'll pay a significant performance penalty for no benefit. Just use inline 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)

Answer 2

You need to remove your image tag.

Currently your css expands to:

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

You should change it to:

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

I'll have a check see if there is a helper for it.

EDIT: the helper is image_path so you need:

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