Question

下面的这个js代码用于Prestashop，通过点击缩略图交换主图像：

$('.js-qv-product-cover').attr('src', $(event.target).data('image-large-src'));

主图像的HTML代码如下：

<div class="product-cover">
<img class="js-qv-product-cover" src="{$product.cover.bySize.ats_large.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
</div>

我正在尝试将图像用作背景，我想出了这段代码：

<div class="product-cover" style="background-image: url({$product.cover.bySize.ats_large.url});"></div>

在JS文件中，我将'src'更改为'url'，但单击缩略图时它无效。这样做的正确方法是什么，以便将主图像作为背景交换？

Answer 1

这是使用jquery更改背景图像的方法。在您的情况下，只需将我使用的随机网址替换为$(event.target).data('image-large-src')（应该是您自己的图片网址。

$('.change').on('click', () => {
  $('.container').css("background-image", "url('https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg')");
})

.container {
  width: 500px;
  height: 200px;
  background-image: url('https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?auto=compress&cs=tinysrgb&h=350')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

<button class="change">Change</button>

Answer 2

我可以使用以下代码解决此问题：

var quickviewDataBgPath  = $(event.target).data('image-large-src');
$('.js-qv-product-cover').css('background-image', 'url(' + quickviewDataBgPath + ')' );

交换用作背景的图像用javascript

2 个答案: