Как использовать ajax для установки src изображения?

Мне нужно установить некоторые заголовки при получении изображения. Атрибут imgsrc не позволяет этого, поэтому я использую запрос XHR для получения изображения. Однако, когда я устанавливаю атрибут src в тег img после завершения этого запроса, похоже, что запрос запускается снова. Есть ли способ кэшировать изображение и не запускать второй запрос?Как использовать ajax для установки src изображения?

Пример кода:

$(document).ready(function() { 
    var url = 'https://i.imgur.com/bTaDhpy.jpg' 
    var file = $.get(url); 
    file.then(function(data) { 
     $('#foo').attr('src', url); 
    }); 
});

JS Fiddle: https://jsfiddle.net/mehulkar/o4Lcs5Lo/

Примечание: мой вопрос не о том, как установить соответствующие заголовки в запросе XHR. Мой вопрос заключается в том, как не запускать другой GET из настройки атрибута src и использовать ответ XHR для отображения изображения.

источник

2015-03-30 mehulkar

просто сделайте это '' $ ('# foo'). Attr ('src', 'https://i.imgur.com/bTaDhpy.jpg'); '' и вам хорошо идти! –

Ему нужны заголовки, поэтому ему нужен XHR. Он также нуждается в изображении как '', поэтому ему нужно 'src'. Боюсь, вам придется разрешить браузеру кэшировать. – Rudie

Вы можете использовать ответ XHR для создания URL-адреса данных ... =) Или нет: https://jsfiddle.net/rudiedirkx/o4Lcs5Lo/1/ См. Http://stackoverflow.com/a/28973694/247372 для родного Тип ответа XHR 'arraybuffer' – Rudie

Используйте $.ajax для этого:

var myImg = $('#foo'), 
    mySrc = 'https://i.imgur.com/bTaDhpy.jpg'; 

$.ajax({ 
    url: mySrc, 
    type: "GET", 
    headers: { 
     "X-TOKEN": 'xxxxx' 
    } 
}).done(function() { 
    myImg.attr('src', mySrc); // set the image source 
}).fail(function() { 
    myImg.hide(); // or something other 
});

источник

2015-03-30 20:16:58 RWAM

Настройка атрибута 'src' вызовет другой запрос GET (как показывает пример jsfiddle), по крайней мере, в Chrome. – mehulkar

Посмотрите http://stackoverflow.com/a/12714338/1295622. Можете объединить оба ответа. – RWAM

Я не могу комментировать здесь из-за очков репутации, но вот то, что я нашел на этом. У меня есть локальная html-страница, которую я выполняю через файл: /// Я могу использовать $ .get для динамического вытягивания svg-файлов в переменную. Отладчик показывает это, как если бы это был стандартный html-узел <svg. (Я использую Firefox Developer, но также и в Firebug, я вижу svg-файл как узел.).

Итак, на данный момент у меня есть пустой <img, который я хочу установить в свой файл svg. Я просто не знаю, как установить атрибут src самому самому документу. Я предполагаю, что могу кодировать base64 .. Возможно, вы сможете установить его с помощью самого отладчика. Я не мог заставить это работать надежно. Другой способ (для меня, поскольку я использую svg), - это клонировать объект, а затем записать его узел для узла. Если вы не используете svg, возможно, есть такой же хак, который вы могли бы провести с холстом? Загрузите изображение в виде спрайта, затем прочитайте цвета и задайте пиксели?

источник

2017-02-03 08:38:10 user1529413

Как использовать ajax для установки src изображения?

ответ

Смежные вопросы