i want load image to div from remote site, use ajax+jquery

Question

i try load image. but every time to console log set "error".

Where my error? first way

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

Felix Kling · Answer 1 · 2014-02-24T03:54:26.427

2

You cannot make Ajax requests to external sites, unless they explicitly allow it. That's called the same origin policy.

In your case, you don't even have to make an Ajax request. You should just assign the URL to the src property of the image:

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

or more jQuery-like:

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

The browser will load the image by itself.

You can bind an error event handler to the image and do whatever you want to do if image is not available, and a load event handler to get notified that the image was loaded:

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

edited Feb 24 '14 at 03:54

answered Feb 24 '14 at 03:48

Felix Kling

795,719
175
1,089
1,143

@user3044272 yeah. like Felix Kling says, why you need to call ajax for image. just assign it to src. – Faiz Shukri Feb 24 '14 at 03:49
but save img on own server (use php)? – user3044272 Feb 24 '14 at 03:50
Even if that ajax call worked, it would return the bytes of the image. You cannot set the img src to the bytes of the img. The img src is the url of the image. – joseph Feb 24 '14 at 03:52
@user3044272: The simplest way would be to use PHP to fetch the image. See https://php.net/manual/en/curl.examples-basic.php. – Felix Kling Feb 24 '14 at 03:52
i need follow events (load this image or error(if error try load again)) – user3044272 Feb 24 '14 at 03:52

score 0 · Answer 2 · edited May 23 '17 at 12:10

If you have a usecase that requires the bytes of the image to be transfered through the ajax call then take a look at this post: http://stick2basic.wordpress.com/2013/01/24/loading-image-dynamically/

In summary,

backend server returning the image needs to send the base64 encoding of the bytes of the image.
The ajax call sets the src of the img node to 'data:image/png;base64,' + bytes

You might even be able to convert the bytes returned from the ajax call to base64 encoding on the client side as well. More info: (Javascript) Convert Byte[] to image

i want load image to div from remote site, use ajax+jquery

2 Answers2