Change the src of HTML image tag to load image from a url using Javascript

Question

Sorry to sound naive since I'm a beginner. I have been trying to load an image on my website with the image hosted somewhere else online and having a url "http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"

I have an image tag defined as below

<img id="image" src="" alt="" />

Moreover my javascript function executes the following on a button click

document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg";

The URL seems to work fine, but the image doesn't show up onclick.

Am I making any mistake?

Thanks for any suggestion :)

Are you sure the correct function triggers on-click?

perennial_
– perennial_

2015-09-04 17:21:17 +00:00
Commented Sep 4, 2015 at 17:21 — perennial_
– perennial_, Commented Sep 4, 2015 at 17:21
Yes I checked that :(

Mobashyr Mohammad
– Mobashyr Mohammad

2015-09-05 04:51:28 +00:00
Commented Sep 5, 2015 at 4:51 — Mobashyr Mohammad
– Mobashyr Mohammad, Commented Sep 5, 2015 at 4:51

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-04 17:24:57Z

1

I could see that you are using " inside here, may be the HTML would also have " so that, it might not work. You can use the following code:

<a href="#"
   onclick='document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"; return false'>Change</a>

answered Sep 4, 2015 at 17:24

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

1 Comment

Mobashyr Mohammad Over a year ago

Thanks for the quick respond. I checked it but that isn't the issue unfortunately :(

Lombas · Accepted Answer · 2016-05-26 18:31:30Z

0

I created a Jsfiddle, and it seems to work fine. https://jsfiddle.net/ltlombardi/jvts4m3y/

var coco = function(){
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2016/02/Vapor-Rage-Small-Logo-new.png";
};

<img id="image" src="" alt="" />
<a href="javascript:void(0);" onclick="coco()">Click here</a>

answered May 26, 2016 at 18:31

Lombas

1,1412 gold badges10 silver badges25 bronze badges

Collectives™ on Stack Overflow

Change the src of HTML image tag to load image from a url using Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related