how to replace image srcset with javascript

Question

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?

*"I have try so many things but it is not working"* can you please include your attempt(s)? This way we help you find out why its not working and possibly create an answer. SO is not the place the ask for free solutions. -> [How to Ask](https://stackoverflow.com/help/how-to-ask) — Reyno, Nov 02 '21 at 09:36
var img = document.querySelector(".class > img"); var myFunction = function() { img.srcset="newimg.svg"; } — Miguel bastidas, Nov 02 '21 at 09:50
Please update your question instead of posting in the comments it will help future readers — Reyno, Nov 02 '21 at 09:51
When I select with $('source[srcset]'); it only selects one size — Miguel bastidas, Nov 02 '21 at 09:51
`var img = document.querySelector(".class > img")` - you have shown nothing with that `class`, and no `img` elements ...? — Don't Panic, Nov 02 '21 at 10:05
"*I have try so many things*" - but not searching? I searched for your exact question title and found many answers here, did you check those? https://stackoverflow.com/questions/48078017/change-srcset-attribute-value-in-picture-tag, https://stackoverflow.com/questions/56927357/how-to-change-picture-srcset-property-on-click-using-javascript, https://stackoverflow.com/questions/57340051/how-is-it-possible-to-change-an-img-src-using-srcset-using-js-based-on-which, https://stackoverflow.com/questions/35420984/how-to-change-picture-element-srcset-value-with-jquery ... — Don't Panic, Nov 02 '21 at 10:08
Does this answer your question? [How to change picture srcset property on click using javascript](https://stackoverflow.com/questions/56927357/how-to-change-picture-srcset-property-on-click-using-javascript) — Don't Panic, Nov 02 '21 at 10:08

score 4 · Answer 1 · answered Nov 02 '21 at 10:10

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');
});

This answerd worked great! I am a junior dev. I was selecting the element wrong and doing it all wrong. Thank you so much. I am still learning js — Miguel bastidas, Nov 02 '21 at 10:26

score 1 · Answer 2 · answered Nov 02 '21 at 09:37

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>

how to replace image srcset with javascript

2 Answers2