Question

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

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

$('#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');
    }
     });
    });

Answer 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)
});

Answer 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

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

2 个答案: