Is there a way to get an image from an outer webpage with javascript code?

I'll explain: I have a website, lets say www.one, and I want to show in this website's homepage an image that exists in another website, lets say www.two.co.il

Can I do it?

Is there a way to get an image from an outer webpage with javascript code?

I'll explain: I have a website, lets say www.one., and I want to show in this website's homepage an image that exists in another website, lets say www.two.co.il

Can I do it?

• javascript
• jquery
• asp
• html

• 1 No, SOP shall not restrict in case of images. – Furqan Hameedi Commented Jun 18, 2012 at 13:12
• Displaying images does work actually! – Amberlamps Commented Jun 18, 2012 at 13:13

5 Answers 5

Try this:

var img = document.createElement("img");
    img.src = "http://www.two.co.il/image.jpg";
document.body.appendChild(img);

A convenient thing is to create first a placeholder in your HTML:

<div id='externalImage'></div>

because it will not disrupt the function if the layout changes and allows precise placement.

As for the real question on how you put an image, assuming from the tags that you use Jquery:

$("#externalImage").html("<img src=\"http://put.url.here/image.jpg\" />");

if you want to insert it into the aforementioned placeholder. Otherwise to plainly add the image to the document you can append it to the documentd BODY or elsewhere using document.body.appendChild like in the other answers.

Yes.

var image = document.createElement('img');
image.setAttribute('src', 'http://www.two.co.il/foo.jpeg');
image.setAttribute('alt', 'something suitable');
document.body.appendChild(image);

So long as you aren't trying to get content from the other site into JS (you aren't, you are create an img element in the DOM, JS has no further involvement), you won't run into the Same Origin Policy.

or simply:

$("<img src='" + imgUrl + "' alt='" + altText + "'>").appendTo("body");

make a div and give id = "div1" with height and width

 <div id='div1' height='100' width='100'></div>
    $('#div1').css('background-image, 'http://www.two.co.il/urImage.jpg');

it is shortest way to apply image