抓取回形针图像网址并将其作为背景图像传递给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

我必须使用@ 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+')')

这就像魅力一样。