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 — StackByMe
– StackByMe, Commented Nov 2, 2021 at 9:36
var img = document.querySelector(".class > img"); var myFunction = function() { img.srcset="newimg.svg"; } — Miguel bastidas
– Miguel bastidas, Commented Nov 2, 2021 at 9:50
Please update your question instead of posting in the comments it will help future readers — StackByMe
– StackByMe, Commented Nov 2, 2021 at 9:51
When I select with $('source[srcset]'); it only selects one size — Miguel bastidas
– Miguel bastidas, Commented Nov 2, 2021 at 9:51

Nice Books · Accepted Answer · 2021-11-02 10:10:04Z

4

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

answered Nov 2, 2021 at 10:10

Nice Books

1,8812 gold badges19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miguel bastidas Over a year ago

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

Ouss Ma L'aire Bien · Accepted Answer · 2021-11-02 09:37:43Z

1

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>

answered Nov 2, 2021 at 9:37

Ouss Ma L'aire Bien

1231 silver badge6 bronze badges

Collectives™ on Stack Overflow

how to replace image srcset with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related