Replace URL parameters in src of img element

Question

not sure if this is possible but we have a lots of products being forced to load at specific size & quality and I want to replace the below from the img src code:

&wid=128&hei=144&qlt=80

with:

&wid=256&hei=288&qlt=100

I've tried using something I've used before to replace a complete img src link:

$('img[src="https://images/image1&qlt=80&w=300&h=364&v=1"]').attr('src','https://images/image2&qlt=80&w=300&h=364&v=1');

But it doesn't work on part of an img src:

$('img[src="&wid=128&hei=144&qlt=80"]').attr('src','&wid=256&hei=288&qlt=100');

Because we have lots of images which are going to change alot I can't use my original method of replacing the whole img src, Is there a way of replacing this specific bit of code with jquery?

Thanks Michael

Thanks

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

Modifying the src attribute is the right way to do it, but the src attribute must always contain the whole URL of the image.

If you know the numbers will always be the same, you can just manipulate the src attribute as a string:

$('img').each(function(){

    var srcString = this.getAttribute('src');

    srcString = srcString.split('128').join('256');
    // same thing for the other two numbers

    this.setAttribute('src', srcString);

});

If it's more complicated than that, you will have to manipulate the src attributes as URLs. More info on how to do that here: Change URL parameters

edited May 23 '17 at 12:23

Community

1
1

answered Feb 29 '16 at 13:53

KWeiss

2,954
3
21
37

Thank you this was perfect :) – Chobbit Feb 29 '16 at 14:17
I just change the .split and .join slightly (which I'll put below for others incase they need to know) but you were completely right, thanks :) – Chobbit Feb 29 '16 at 14:18

score 0 · Answer 2 · answered Feb 29 '16 at 14:20

You could use the replace Javascript method:

$('img').each(function(){

 var origin = this.getAttribute('src');
 var wid = "256";
 var hei = "288";
 var qlt = "100";

 origin = origin.replace("128", wid);
 origin = origin.replace("144", hei);
 origin = origin.replace("80", qlt); 

 this.setAttribute('src', origin);

});

Check out the fiddle.

score 0 · Answer 3 · answered Feb 29 '16 at 14:21

Thanks to KWeiss for the answer:

$('img').each(function(){

    var srcString = this.getAttribute('src');

    srcString = srcString.split('wid=128').join('wid=256');
    srcString = srcString.split('hei=144').join('hei=288');
    srcString = srcString.split('qlt=80').join('qlt=100');
    // same thing for the other two numbers

    this.setAttribute('src', srcString);

});

Replace URL parameters in src of img element

3 Answers3