Dynamically replace img src attribute with jQuery

Question

I am trying to replace the img source of a given source using jQuery. For example, when the image src is smith.gif, replace to johnson.gif. If williams.gif replace to brown.gif etc.

EDIT: The images are retrieved from an XML to a random order, without class to each .

This is what I tried:

if ( $("img").attr('src', 'http://example.com/smith.gif') ) {
              $(this).attr('src', 'http://example.com/johnson.gif');
            }
if ( $("img").attr('src', 'http://example.com/williams.gif') ) {
              $(this).attr('src', 'http://example.com/brown.gif');
            }

Note that my HTML has many images. For example

<img src="http://example.com/smith.gif">
<img src="http://example.com/williams.gif">
<img src="http://example.com/chris.gif">

etc.

So, how can I replace the images: IF img src="http://example.com/smith.gif" then show "http://example.com/williams.gif". etc...

Thanks alot

You're using $(img) for checking the property, and $(this) for setting it. Is this really what you had in mind to do? — David Hedlund
– David Hedlund, Commented Sep 18, 2011 at 14:29
This is not how attr() works. You need to walk through each image using .each() — Pekka
– Pekka, Commented Sep 18, 2011 at 14:30
I think you need something more like this. $("img[src=example.com/smith.gif]") — Gerben
– Gerben, Commented Sep 18, 2011 at 14:33

Niko · Accepted Answer · 2011-09-18 14:31:12Z

82

This is what you wanna do:

var oldSrc = 'http://example.com/smith.gif';
var newSrc = 'http://example.com/johnson.gif';
$('img[src="' + oldSrc + '"]').attr('src', newSrc);

answered Sep 18, 2011 at 14:31

Niko

26.8k9 gold badges97 silver badges112 bronze badges

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

1 Comment

jQuerybeast Over a year ago

Thank you sir. This is what I was looking for. Give me 10 minutes to answer your question.

uadnal · Accepted Answer · 2011-09-18 14:32:57Z

21

You need to check out the attr method in the jQuery docs. You are misusing it. What you are doing within the if statements simply replaces all image tags src with the string specified in the 2nd parameter.

http://api.jquery.com/attr/

A better way to approach replacing a series of images source would be to loop through each and check it's source.

Example:

$('img').each(function () {
  var curSrc = $(this).attr('src');
  if ( curSrc === 'http://example.com/smith.gif' ) {
      $(this).attr('src', 'http://example.com/johnson.gif');
  }
  if ( curSrc === 'http://example.com/williams.gif' ) {
      $(this).attr('src', 'http://example.com/brown.gif');
  }
});

answered Sep 18, 2011 at 14:32

uadnal

11.5k2 gold badges35 silver badges40 bronze badges

1 Comment

jQuerybeast Over a year ago

Thank you sir. I will be using Niko's example. Less code if you won't use the var OldSrc and newSrc.

Primoshenko · Accepted Answer · 2019-11-12 15:04:24Z

5

In my case, I replaced the src taq using:

   $('#gmap_canvas').attr('src', newSrc);

answered Nov 12, 2019 at 15:04

Primoshenko

1401 silver badge10 bronze badges

Collectives™ on Stack Overflow

Dynamically replace img src attribute with jQuery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related