Как загрузать ajax ом картинку?

Question

[jane jane]

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

и второй

$.ajax({
  url:'https://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg',
  type:"GET"
     })
.done(function(data) {    
    console.log("загрузка")
    var newInput = document.createElement("img");
	 newInput.type = "img";
         newInput.id = "div";
	 newInput.src = test[0];
        document.getElementById("cont").appendChild(newInput);

})
.error(function(){
  console.log("ошибка")
})
 .always(function(){
     console.log("Всегда  выполняется")
 });

Answer 1

[Алксандр Коротаев]

По первому случаю:
1. Раз используете jquery научитесь создавать элемент через jquery: api.jquery.com/jQuery/#jQuery2
2. Изучите что такое глобальные и локальные переменные.
3. В success вы получаете массив байт. Однако img требует строку ссылку на картинку.
4. Посмотрите контекст выполнения success функции.

По второму случаю всё хуже. Прежде чем писать, подумайте, что вам надо.

Comments

[jane jane]

спустя нное время, должна признать что да, 2-ой способ воообще хрень какая то, сама не понимаю что хотела получить

Answer 2

[Maxim Timokhin]

А при чем тут Ajax? Сделайте так:

var img = new Image();
img.onload = function(){
document.getElementById("cont").appendChild(this);
}
img.src = '...';

upd:
Первый вариант:

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

Comments

[jane jane]

нужна проверка загрузилось оно или нет

[Maxim Timokhin]

img.onerror = function(){...} – но не уверен насчет кроссбраузерности

Answer 3

[Александр Хиренко]

Не знаю зачем Вам это нужно, но если нужно загрузить картинку то тип результата должен быть blob

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
        console.log(xhr.response);
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(xhr.response);
    }
xhr.open('GET', 'http://pp.vk.me/c608129/v608129926/13d7/M78M4KmekWI.jpg', true);
xhr.send();

Answer 4

[svd71]

img src может обходиться без url. Достаточно загнать туда строку с данными в base64.

Answer 5

[Marina]

jsfiddle.net/k2Zh9