javascript - 如何编写一个 JQuery 函数来从内联样式的 div 中获取背景图像并将其放入图像标签中？

Question

如何编写一个函数，该函数将从 div 的内联样式中获取背景图像并删除 div 并在它的位置使用<img>标签？

这是我的 div 的样子：

<div class="img_is" style="background-image: url(//domain.com/images/image1.png);"></div>

我将拥有几个这样的 div，并且每个 div 的 img 源都不同。

那么现在我该如何编写一个函数来获取背景图像的 src 并将它们放入<img src>并隐藏 div 呢？

我想到了这段代码，但无法真正弄清楚如何反转它。请帮忙。如果您发现有问题或对此有任何疑问，请告诉我。

我的代码：

var images = $('li > img');
images.each(function(){
    $(this).parent().css('background-image', 'url(' + $(this).attr('src') + ')');
    $(this).hide(); // to hide it
    $(this).remove(); // to remove it from the markup
});

Answer 1

这是一个使用replaceWith函数的重载的选项：

http://jsfiddle.net/fQ2t3/

$('.img_is').replaceWith(function () {
    return $('<img/>', {
        src: $(this).css('background-image').replace(/url\(([^\)]+)\)/g, '$1')
    });
});

Answer 2

url(...)在将其添加到新图像之前，您将需要从图像中删除包装src。

function(){
  var src = $(this).css('background-image').slice(4,-1),
      img = new Image();

  img.src = src;

  $(this).replaceWith(img);

}

像这样的东西应该可以解决问题。