1

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.com, 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?

Improve this question
2
  • 1
    No, SOP shall not restrict in case of images. Commented Jun 18, 2012 at 13:12
  • Displaying images does work actually! Commented Jun 18, 2012 at 13:13

5 Answers 5

Reset to default
3

Try this:

var img = document.createElement("img");
    img.src = "http://www.two.co.il/image.jpg";
document.body.appendChild(img);
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

That image file resource has to shared or else it will give Access denied I guess.
That is pretty self-explaining isn´t it? You cannot access anything that is not open for the public domain, can you?
@yogi — If it isn't shared, then the URL would be an HTTP Forbidden response and not an image.
I think you misunderstood me. I don't have the image full url, just the page's url
When you do not have the image´s url, how can anybody know what you want to display? Do you want to display just random images from a different page?
|
2

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.

Improve this answer

7 Comments

Why not? Because in real world applications there WILL be a placeholder, that can be previously skinned by CSS and avoids traversing the document, thus not disrupting its function if the layout changes. I bet appending to BODY is an unlikely case.
It is about adding an image to your website. Where to put that image is up to the author. Why do you ever want to estimate possibilities that are beyond the original question?
If someone´s asks you, how do I put an image on my page, your answer cannot be "create first a placeholder", because that is simply not true.
Because the OP talks about putting the image in a website's homepage. By fair judging, we can assume this homepage is not blank but populated, and the simplest and cleanest approach would be to have a placeholder, because it's a enormously common scenario. I'll rephrase my post, but honestly I thing you're hitting a bit too hard on my solution which seems reasonable in real-life scenarios.
(Irony: I read now that the OP was asking for another thing, he has only the page URL non the image URL... talking about being clear...)
|
1

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.

Improve this answer

2 Comments

I think you misunderstood me. I don't have the image full url, just the page's url
The same origin policy will prevent you parsing the HTML to find img elements to figure out the URI from.
1

or simply:

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

5 Comments

+1 for jQuery, so that it'll work in all browsers. I'd go for a solution that doesn't rely on string concatenation, though, such as .attr or $('<img />', { src: imgUrl, alt: altText }) but I guess that's mostly a matter of preference.
Appending to body has sense to show the general approach, which is 100% legit, but in real-world applications you will use most of the times a placeholder, 'cause appending to BODY doesn't make much sense.
Yes I agree with you @DavidHedlund, in some cases you might do that for accurate and safe coding, but sometimes when speed is a matter of coding, this approach would be better, also building the whole html and appending all of them at once is the most efficient solution.
@Cranio I wrote that code because the previous answers included that kind of approach. So I wrote it like that way. I would code it like you too.
Yes of course, I just wanted to expand on a right and correct answer :)
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.