0

i have this

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

i want to take this(background) url and create new img tag with src="background img url" in the same div and delete the old img tag using js or jq

i tried to do this 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');

but it is not working for me so i have to do it the other way

Maulik Lathiya
  • 153
  • 3
  • 14
  • What are you trying to do? Getting a url image and try to create a new image with this image like background? You can access to src image to change image.. like $('#newImage').attr({src:'YOUR-NEW-URL'}); – Roy Bogado Jun 16 '17 at 10:24
  • Duplicate of - https://stackoverflow.com/questions/14013131/javascript-get-background-image-url-of-div – Sagar Jun 16 '17 at 10:25
  • yes i can use jquery @manish yadav – Maulik Lathiya Jun 16 '17 at 10:26
  • i want to create new img tag with this background image and remove this img tag – Maulik Lathiya Jun 16 '17 at 10:28
  • Maulik. Please check the above link posted. If in case the above link doesn't help. Let me know. – Sagar Jun 16 '17 at 10:30
  • cant add id in the image tag and how do i get the background image url in the var ?! so i can use this to create new image tag $('.data').prepend('') – Maulik Lathiya Jun 16 '17 at 10:35
  • Your code is working in my test. But you want to completely remove the img and create a new one? Why? It is working in a much less resource intensive way. – hallleron Jun 16 '17 at 11:12

3 Answers3

1

try this one

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>
Bhargav Chudasama
  • 6,928
  • 5
  • 21
  • 39
0

Try below code:- 

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('https://i.stack.imgur.com/5eiS4.png')"/>
</div>
Abhishek Sharma
  • 1,420
  • 1
  • 20
  • 30
0

with height and width attribute http://jsfiddle.net/z2jKA/564/

remove height and width attribute http://jsfiddle.net/z2jKA/565/

I Change little Change in your coding and its working very well. you check this link jsFiddle. i was done by change some in your code. maybe its helpful for you

    $(function() {


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

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


});
Urvish Patel
  • 134
  • 15