how to replace image srcset with javascript-CodePudding

I am doing an A/B Test. I need to change the image url. I have an https://newimage.svg that needs to replace the srcset img.png with javascript on the console:

<picture class="pic_test">
  <source media="(min-width: 992px)" srcset="img.png">
  <source media="(min-width: 600px)" srcset="img.png">
  <source media="(max-width: 599px)" srcset="img.png">
  <img src="img.png">
</picture>

This is an sample of the source structure. I can not put all the inside information because the confidencial job requirement but this is a summary (if adding this could help):

<source media="(min-width: 992px)" class="" src="" data-src="" data-srcset="img.png 960w,img.png 1176w,img.png 1600w,img.png 2400w" srcset="img.png 960w,img.png 1600w,img.png 2400w">

I have try so many things but it is not working. Does anyone knows how to change the image url with javascript or jquery?

CodePudding user response：

If I understand your question correctly, you have a number <source> in a <picture> & you need to update all their srcset.

You can use querySelectorAll to select all the <source>, forEach to loop over them & finally use setAttribute to update the srcset attribute.

The source element also has a srcset property (MDN), but it is still experimental (as of Nov 2021).

var sourceList = document.querySelectorAll('picture.pic_test source');
sourceList.forEach((source)=> {
    source.setAttribute('srcset','img.png');
});

CodePudding user response：

You can use attr() function to change src attribute with jquery

console.log('before : ' $('#myImg').attr('src'));
$('#myImg').attr('src','google.png');
console.log('after : ' $('#myImg').attr('src'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<picture class="pic_test">
  <source media="(min-width: 992px)" srcset="img.png">
  <source media="(min-width: 600px)" srcset="img.png">
  <source media="(max-width: 599px)" srcset="img.png">
  <img src="img.png" id="myImg">
</picture>