抓取回形针图像 url 并将其作为背景图像传递给 scss

Question

我有一个 索引页面 ，其中显示了图片的列表。

点击任何图片，我想抓取 image_url 并将其传递给我的 css/scss 作为 background-image 在我的 #header div.

以下是我目前所做的：

index.html.haml

%header
 %div#has-zoom

 %section
   - @images.each do |image|
    = image_tag image.image.url(:thumb), class: 'touched'

image.coffee

$('.touched').click ->
  $('#head-zoom').addClass 'enlarge'

image.css.scss

.enlarge {
          background-image: image-url(<%= image_tag image.image.url(:thumb) %>);
          height: 100vh;
          background-size: cover;
          background-position: center;
 }

非常感谢您的帮助。

Answer 1

您不能在 image.css.scss 中执行此操作，因为 .scss 在将其发送到浏览器之前会在服务器端预编译为 .css 文件。您正在尝试的交互性是在客户端。

您可以执行以下操作：

$('.touched').click ->
  var image_src = $(this).attr('src')
  $('#head-zoom').addClass('enlarge')
  $('#head-zoom').css('background-image', 'url('+image_src+')')

并将 .enlarge 更新为以下内容：

.enlarge {
  height: 100vh;
  background-size: cover;
  background-position: center;
}

Answer 2

我必须 post 使用@Dharam 的回答对我有用。

 $('.touched').click ->    #-> Gets element with the class="touched" 
 var image_src = $(this).attr('src') 
 #-> (this).attr('src') is a jquery method that grabs / returns a value.   
 #-> In my case, returns the clicked img src's value = http://localhost:3000/system/images/images/000/000/018/thumb/%2846%29.jpg?1472555101

当然是从下面拿来的

index.html.haml

= image_tag image.image.url(:thumb), class: 'touched'

也就是说，我现在可以执行如下操作：

$('#head-zoom').addClass('enlarge')
  $('#head-zoom').css('background-image', 'url('+image_src+')')

这很有魅力。

抓取回形针图像 url 并将其作为背景图像传递给 scss

Grab paperclip image url and pass it to scss as background image

jquery

ruby-on-rails

sass

coffeescript

ruby-on-rails-4

index.html.haml

image.coffee

image.css.scss

index.html.haml