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

Question

我有一个显示图像列表的索引页。

点击任何图片时，我想获取 image_url 并将其作为 background-image 传递给我的 css/scss在我的 #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

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

这就像魅力一样。

Answer 2

您不能在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;
}