Установить фоновое изображение с jQuery

Question

Я использую <picture><source srcset> для адаптивного изображения. Требуется, чтобы изображения внутри <picture> были заданы как фоновые изображения.

Я использовал jQuery, чтобы взять URL-адреса изображений и установить их в качестве фоновых изображений. Затем я удаляю srcset, чтобы они больше не были изображениями, а стали фоновыми изображениями.

Проблема: почему-то значение URL не отображается в 'url(myBG)' В инспекторе отображается <source media="(min-width: 768px)" style="background-image: url("myBG");">. Пожалуйста, посмотрите на мои JS и дайте мне руку.

Спасибо

jsfiddle

JS

$('source').each(function() {
    var myBG = $(this).attr('srcset');
  console.log(myBG);
$(this).css('background-image', 'url(myBG)');
$(this).removeAttr('srcset');
})

HTML

<div>
<picture>
  <source media="(min-width: 768px)" srcset="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  <source media="(min-width: 414px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
  <img src="https://www.w3schools.com/tags/img_pink_flowers.jpg">
</picture>
</div>

Answer 1

Это потому, что вы передаете myBG в виде строки. Это должно выглядеть так: 'url('+myBG+')'

$('source').each(function() {
  var myBG = $(this).attr('srcset');
  console.log(myBG);
  $(this).css('background-image', 'url('+myBG+')');
  $(this).removeAttr('srcset');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <picture>
  <source media="(min-width: 768px)" srcset="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  <source media="(min-width: 414px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
  <img src="https://www.w3schools.com/tags/img_pink_flowers.jpg">
  </picture>
</div>