изображение капчи возвращается двоичные данные? Как отобразить это?

Question

Я получаю изображение капчи из пакета SimpleCaptcha на основе Java

Во внешнем интерфейсе я просто добавляю на свою страницу следующее и получаю изображение капчи:

<img src="stickyImg" />

Я хочу перезагрузить это изображение с помощью javascript.

Я пытался:

$("#theclickhandler").click(function(){  
    $("#stickyImg").load('stickyImg', function(response){           
       $("#stickyImg").attr('src', response); 
    });
    return false;
});

Это получает изображение, но выводит что-то вроде этого (очевидно, значительно укороченное):

<img src="captcha image�PNG �ݚ��L�23U�݆�}$�J����Dy����IEND�B`� ">

Для меня это выглядит как необработанные двоичные данные. Как мне заставить это работать?

Answer 1

Атрибут src тега изображения указывает браузеру, где находится изображение для загрузки, а не содержимое изображения.Итак, вы вставляете содержимое изображения в то место, где вы хотите, чтобы оно было, и это дает вам мусор, потому что это просто не имеет смысла.

Итак, чтобы перезагрузить изображение, вам нужносообщить браузеру, что адрес изображения изменился.Недостаточно просто перезаписать местоположение в атрибуте src изображения на тот же адрес - это не скажет браузеру что-либо изменить.Вы можете преодолеть это, вставив некоторые случайные данные в строку запроса, скажем, время запроса.Как подсказывает @mikerobi, вы можете просто переписать тег src, здесь с модификацией размещения метки времени в строке запроса (которую ваш сервлет почти наверняка игнорирует):

$('#stickyImg').attr('src', 'stickyImg?' + (new Date().getTime()));

Answer 2

Вы не можете использовать этот подход для загрузки изображений, вам нужно установить атрибут URL-адреса изображения на путь генератора изображений.

$('#stickImg').attr('src', 'path/to/image/generator');

Answer 3

Я не знаю, сколько браузеров его поддерживают, но можно кодировать изображение с помощью base64, добавлять к нему префикс (в зависимости от формата изображения) «data: image / png; base64,» и использовать его в качестве URIдля изображения.