我想从远程站点加载图像到 div，使用 ajax+jquery答案

【问题标题】：i want load image to div from remote site, use ajax+jquery我想从远程站点加载图像到 div，使用 ajax+jquery
【发布时间】：2014-02-24 11:57:20
【问题描述】：

我尝试加载图像。但每次控制台日志设置“错误”。

我的错误在哪里？ 第一种方式

$('#cont').click(function() {
  $.ajax({
    type: "GET",
    url: "http://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg",
    dataType: "image/gif",
    success: function(img) {
      i = new Image();
      i.src = img;
      $(this).appned(i);
    },
    error: function(error, txtStatus) {
      console.log(txtStatus);
      console.log('error');
    }
     });
    });

【问题讨论】：

append 而不是appned

标签： javascript jquery

【解决方案1】：

除非他们明确允许，否则您不能向外部站点发出 Ajax 请求。这就是same origin policy。

在您的情况下，您甚至不必发出 Ajax 请求。您应该将 URL 分配给图像的 src 属性：

$('#cont').click(function() {
  var i = new Image();
  i.src = 'http://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg';
  $(this).append(i);
});

或更多类似 jQuery 的：

$('#cont').click(function() {
  $('<img />', {
     src: 'http://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg'
  }).appendTo(this);
});

浏览器会自行加载图片。

您可以将error event handler 绑定到图像并在图像不可用时执行任何您想做的事情，并使用load event handler 来获得图像已加载的通知：

$('#cont').click(function() {
  $('<img />', {
     src: 'http://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg',
     on: {
       load: function() {
          console.log('Image loaded successfully');
       },
       error: function() {
          console.log('Error while loading image');
       }
     }
  }).appendTo(this)
});

【讨论】：

@user3044272 是的。就像 Felix Kling 说的，为什么你需要为图像调用 ajax。只需将其分配给 src。
但是将img保存在自己的服务器上（使用php）？
即使该 ajax 调用有效，它也会返回图像的字节数。您不能将 img src 设置为 img 的字节。 img src 是图片的url。
@user3044272：最简单的方法是使用 PHP 来获取图像。见php.net/manual/en/curl.examples-basic.php。
我需要关注事件（加载此图像或错误（如果错误尝试再次加载））

【解决方案2】：

如果您有一个需要通过 ajax 调用传输图像字节的用例，请查看此帖子：http://stick2basic.wordpress.com/2013/01/24/loading-image-dynamically/

总之，

返回图片的后端服务器需要发送图片字节的base64编码。
ajax 调用将 img 节点的 src 设置为 'data:image/png;base64,' + bytes

您甚至可以在客户端将 ajax 调用返回的字节转换为 base64 编码。更多信息：(Javascript) Convert Byte[] to image

【讨论】：