Replace div background url with img src on jQuery

user_13797944 0
Viewed 65

I have a menu, each item of which contains a div with a background url. It looks like this:

<div class="iksm-term__image-container">
    <div class="iksm-term__image" style="background-image: url(https://example.com/1.jpg)"></div>
</div>
<div class="iksm-term__image-container">
    <div class="iksm-term__image" style="background-image: url(https://example.com/2.jpg)"></div>
</div>
<div class="iksm-term__image-container">
    <div class="iksm-term__image" style="background-image: url(https://example.com/3.jpg)"></div>
</div>
<div class="iksm-term__image-container">
    <div class="iksm-term__image" style="background-image: url(https://example.com/4.jpg)"></div>
</div>

I try it like this:

jQuery (function($) {
    
    $('.iksm-terms-tree--children .iksm-term__image-container').html('<img>');
    
    $('.iksm-terms-tree--children .iksm-term__image-container').each(function() {
        var url = $('.iksm-term__image').css('background-image');
        url = url.replace(/url\(["']?/, '').replace(/["']?\)$/, '');
        $(this).find('img').attr('src','/url');
        $('.iksm-term__image').css('background-image', 'none');
    });
    
    
});

But instead of the path to the image, I get just a "url":

<div class="iksm-term__image-container"><img src="/url"></div>
<div class="iksm-term__image-container"><img src="/url"></div>
<div class="iksm-term__image-container"><img src="/url"></div>
<div class="iksm-term__image-container"><img src="/url"></div>

I would be grateful for any help in this matter.

html jquery
2 Answers

The problem with your line of code: $('.iksm-terms-tree--children .iksm-term__image-container').html('<img>'); is you overwrite all lines inside each iksm-term__image-container, so $('.iksm-term__image') dont exist after that . To avoid that, trap the url before overwritting the html div:

$(function($) {

  $('.iksm-terms-tree--children .iksm-term__image-container').each(function() {
  
    //trap the background property
    var url = $(this).find(".iksm-term__image").css('background-image');
    //keep only url between parenthesis
    url = url.replace(/url\(([^\)]+)\)/, '$1');
    //replace line by tag `img` with the right url directly
    $(this).html(`<img src=${url}>`);

    //$(this).find('img').attr('src', url);
    //$('.iksm-term__image').css('background-image', 'none');
  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="iksm-terms-tree--children">
  <div class="iksm-term__image-container">
    <div class="iksm-term__image" style="background-image: url(https://example.com/1.jpg)"></div>
  </div>
  <div class="iksm-term__image-container">
    <div class="iksm-term__image" style="background-image: url(https://example.com/2.jpg)"></div>
  </div>
  <div class="iksm-term__image-container">
    <div class="iksm-term__image" style="background-image: url(https://example.com/3.jpg)"></div>
  </div>
  <div class="iksm-term__image-container">
    <div class="iksm-term__image" style="background-image: url(https://example.com/4.jpg)"></div>
  </div>
</div>

new html code:

<div class="iksm-terms-tree--children">
  <div class="iksm-term__image-container"><img src="https://example.com/1.jpg"></div>
  <div class="iksm-term__image-container"><img src="https://example.com/2.jpg"></div>
  <div class="iksm-term__image-container"><img src="https://example.com/3.jpg"></div>
  <div class="iksm-term__image-container"><img src="https://example.com/4.jpg"></div>
</div>
user_73807790

You just did a minor mistake I think. You provide a variable as a value(String). e.g ('/url')

Solution:

$(this).find('img').attr('src',url);

or if you require extra / in that case,

$(this).find('img').attr('src','/'+url);
user_124598030
Related