javascript - 使用 javascript 获取网页的图像

Question

有没有办法使用 javascript 代码从外部网页获取图像？

我来解释一下：我有一个网站，比如说 www.one.com，我想在这个网站的主页上显示一个存在于另一个网站上的图片，比如说 www.two.co.il

我可以做吗？

Answer 1

尝试这个：

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

Answer 2

一个方便的事情是首先在您的 HTML 中创建一个占位符：

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

因为如果布局发生变化并允许精确放置，它不会破坏功能。

至于如何放置图像的真正问题，假设您使用 Jquery 的标签：

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

如果要将其插入上述占位符。否则，要将图像明确添加到文档中，您可以将其附加到文档中的 BODY 或document.body.appendChild其他答案中使用的其他位置。

Answer 3

是的。

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

只要您不尝试将内容从其他站点获取到 JS中（您不是，您正在 DOM 中创建一个 img 元素，JS 没有进一步参与），您就不会遇到同源策略.

Answer 4

或者简单地说：

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

Answer 5

制作一个 div 并给出 id = "div1" 的高度和宽度

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

这是应用图像的最短方法