从 img 标签获取背景图片 url 并使用该 url 创建新的 img 标签答案

【问题标题】：get background image url from img tag and create new img tag with that url从 img 标签获取背景图片 url 并使用该 url 创建新的 img 标签
【发布时间】：2017-06-16 10:21:56
【问题描述】：

我有这个

<div class="data">
<img src="#" style="background:url('o.jpg')">
</div>

我想在同一个 div 中使用这个（背景）url 并使用 src="background img url" 创建新的 img 标签，并使用 js 或 jq 删除旧的 img 标签

我试图这样做from

var img = document.querySelector('img'),
    // parse image URL and strip away url('')
    imgURL = img.style.backgroundImage.replace('url("','').replace('")','');
img.src = imgURL;

// remove style attribute afterwards.
img.removeAttribute('style');

但这对我不起作用，所以我必须以另一种方式进行

【问题讨论】：

你想做什么？获取 url 图像并尝试使用此图像创建一个新图像，如背景？您可以访问 src 图像以更改图像.. 像 $('#newImage').attr({src:'YOUR-NEW-URL'});
重复 - stackoverflow.com/questions/14013131/…
是的，我可以使用 jquery @manish yadav
我想用这个背景图片创建新的img标签并删除这个img标签
毛利克。请检查上面发布的链接。如果上面的链接没有帮助。告诉我。

标签： javascript jquery

【解决方案1】：

试试这个

var img = $('#img').css('background-image');;
	
	imgURL = img.replace('url("','').replace('")','');
	img = imgURL;
	
	$('.data').html('<img src='+img+' width="100" height="100">');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<img src="#" style="background:url('o.jpg')" width="100" height="100" id="img">
</div>

【讨论】：

它在我的设备上工作我认为你的代码找不到图像

【解决方案2】：

试试下面的代码：-

var img   = document.querySelector('img');

	// Get the background image style
	var style = img.currentStyle || window.getComputedStyle(img, false);
	var bi    = style.backgroundImage.slice(4, -1);
	
        // create a new image
	var newImage = document.createElement("IMG");

	// Replace string double quotes
	newImage.src = bi.replace(/^"|"$/g, '');;
    
        // append image inside div to current image as it next sibling 
        img.parentNode.insertBefore(newImage, img.nextSibling);

        // Remove old image
	img.parentNode.removeChild(img);

<div class="data">
   <img src="#" style="width:300px;height:250px;background-image: url('http://i.stack.imgur.com/5eiS4.png')"/>
</div>

【讨论】：

【解决方案3】：

带高宽属性http://jsfiddle.net/z2jKA/564/

移除高度和宽度属性 http://jsfiddle.net/z2jKA/565/

I Change little Change 对您的编码进行更改，并且运行良好。你检查这个链接jsFiddle。我是通过更改您的代码中的一些来完成的。也许它对你有帮助

    $(function() {


       var img = $('#img').css('background-image');;

          imgURL = img.replace('url("','').replace('")','');
          img = imgURL;
                    alert(img);
            $("#img").attr("src",""+img+"").removeAttr('width').removeAttr('height');


});

【讨论】：