How can I use .replaceWith to replace the source of an image?

Question

I have a image I'd like to replace but...

<div class="news-thumb-wrapper">
     <img src="/content/oldimage.jpg" class="attachment-post-thumbnail" height="150" width="600">
     <div class="gallery-arrows"></div><h8><a href="/">Some text</a></h8></div>

I've used this code to try replace the entire img tag but it doesn't seem to work.

$( "img.attachment-post-thumbnail" ).replaceWith( "<img src="/content/newimage.png" class="attachment-post-thumbnail" height="41" width="600">" );

Could anyone please tell me what's wrong with the code?

For starters, that's not syntactically valid JS. Look at the syntax highlighting. — Matt Ball, Oct 20 '13 at 18:20
The quotes. You need to either escape your `"` inside your string. or use `'` instead. — Steve Robinson, Oct 20 '13 at 18:20
@Ikillnukes - Don't correct code in questions. Supply an answer for that. — Martin Smith, Oct 20 '13 at 18:21

score 6 · Accepted Answer · answered Oct 20 '13 at 18:20

6

Don't use replacewith to replace the image. Just change the src:

$("selector for img").attr("src", "/content/newimage.jpg");

answered Oct 20 '13 at 18:20

T.J. Crowder

1,031,962
187
1,923
1,875

I don't see why mess with attributes, when the proper way would be manipulating the DOM properties. Okay, the `src` property is synchronized with the `src` attribute, but using `.attr()` unnecessarily is a bad example. – Fabrício Matté Oct 20 '13 at 18:25
@Joe As I just said, this works because the `src` attribute and `src` property are reflected upon each other when one of them is changed. So, in this specific case, it doesn't matter. I'm just saying that `.prop()` is the correct way to do this. Which would you prefer? `img.setAttribute('src', 'url')` or `img.src = 'url'`? That's the difference between `.attr()` and `.prop()` - one is meant for HTML attributes and the other for DOM properties. – Fabrício Matté Oct 20 '13 at 18:36
@TJ you have (IMO) the best answer at [.prop() vs .attr()](http://stackoverflow.com/a/5884994/1331430), any reason to use `.attr()` in this case when you say `.prop()` should be technically preferred? Or just a preference choice here? – Fabrício Matté Oct 20 '13 at 19:01
@FabrícioMatté: *"I don't see why mess with attributes, when the proper way would be manipulating the DOM properties."* LOL I very nearly added a comment to the end of the answer saying this: *"Why I used `attr`: In case there were zero or multiple matching elements."* That's literally it, otherwise, I would have gone with `$("selector for the image")[0].src = "/content/newimage.jpg";` And yes, arguably `prop` would be the better way to go, but with `src`, it really doesn't matter. – T.J. Crowder Oct 20 '13 at 21:21
Hahah makes sense. `:P` Accessing the DOM element is pretty faster than `.attr()`/`.prop()` so it'd be a good option if there is only one element. – Fabrício Matté Oct 20 '13 at 21:55

Fabrício Matté · Answer 2 · 2013-10-20T18:42:03.597

0

Your code has invalid syntax. You should escape the double quotes inside the string or use single quotes:

$( "img.attachment-post-thumbnail" ).replaceWith( '<img src="/content/newimage.png" class="attachment-post-thumbnail" height="41" width="600">' );

Now, the proper way to swap an image is to simply set its src property:

$( "img.attachment-post-thumbnail" ).prop('src', '/content/newimage.png');

edited Oct 20 '13 at 18:42

answered Oct 20 '13 at 18:20

Fabrício Matté

69,329
26
129
166

score 0 · Answer 3 · answered Oct 20 '13 at 18:22

0

you use double cote inside double cote , what you should do is :

$( "img.attachment-post-thumbnail" ).replaceWith('<img src="/content/newimage.png" class="attachment-post-thumbnail" height="41" width="600">')

answered Oct 20 '13 at 18:22

medBouzid

7,484
10
56
86

score 0 · Answer 4 · answered Oct 20 '13 at 18:23

Well, you can try to escape quotes like that "<img src=\"/content/newimage.png\" class=\"attachment-post-thumbnail\" height=\"41\" width=\"600\">"

$( "img.attachment-post-thumbnail" ).replaceWith( "<img src=\"/content/newimage.png\" class=\"attachment-post-thumbnail\" height=\"41\" width=\"600\">" );

or like that '<img src="/content/newimage.png" class="attachment-post-thumbnail" height="41" width="600">'

$( "img.attachment-post-thumbnail" ).replaceWith('<img src="/content/newimage.png" class="attachment-post-thumbnail" height="41" width="600">');

How can I use .replaceWith to replace the source of an image?

4 Answers4