开发者

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

开发者 https://www.devze.com 2023-02-23 03:42 出处:网络
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开发者_StackOverflow社区 hard, but I couldn\'t figure out how to do it in SASS.

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开发者_StackOverflow社区 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.


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)


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"})
0

精彩评论

暂无评论...
验证码 换一张
取 消