updating image source using jquery not working properly

Question

I'm trying to update my image source using jquery. To do it, I am calling .load

function that will return a string which in turn will be used to replace the image source.

srcResult value is new/icon.png:

<script>
 var iconLinkURL = "Users/NewIcon";
 var srcResult = $("#iconImage").children('img').load(iconLinkURL); 


  $("#iconImage").children('img').attr('src', srcResult);
</script>

HTML Side

<a id="iconImage"><img src="old/address.png"></img></a>

What happens is that when the javascript is loaded, the image is loaded like this:

 <a id="iconImage"><img src="[object Object]">new/icon.png</img></a>

Am I missing something hence the issue is persisting?

<img src="old/address.png"/> not <img src="old/address.png"></img> — Pedram
– Pedram, Commented May 22, 2018 at 7:54

BenM · Accepted Answer · 2018-05-22 07:51:27Z

2

load() returns an object. If you're not interested in pre-loading, just replace your code as follows:

$("#iconImage").children('img').prop('src', 'Users/NewIcon');

However, if you wish to preload the image, use the following:

var src = 'Users/NewIcon',
    img = new Image();

img.src = src;
img.onload = function() {
    $('#iconImage').children('img').prop('src', this.src);
};

It's worth noting that you will also need to wrap your code in the DOMReady event if you're not doing that already.

answered May 22, 2018 at 7:51

BenM

53.3k26 gold badges116 silver badges172 bronze badges

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

Collectives™ on Stack Overflow

updating image source using jquery not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related