установка значения переменной в атрибуте src тега изображения для изображения в кодировке base64 в javascript/ajax

У меня есть байтовый код изображения, закодированный base64, который я пытаюсь установить атрибут src тега в javascript/ajax.

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

var src3="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAUAB0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1hByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADABAAIRAxEAPwDi677TfhJr99py3UstraPJGHjgmLbwcjhwB8vy5Pc9AQOccDXs9h8ZdKNjD/aNheLebf3ot0Vo8+qksDg9cHp0yeteFho0ZN+1Z+r5zWzClCH1GN9devp9+p5TreiX3h7VJNP1CLZMnIYcrIvZlPcH/EBBFZ1dF408T/8JX4ga+SDyYI4xDCp+8UBJBbtklj06cDnGTztYVFFSajselhJVpUISrq07arzCiiipOgKKKKAP//Z";
document.getElementById("outmessage").innerHTML = "<h2> Image \<img src\= "+src3+" /></h2>";

Это не работает: дает мне вывод как

введите здесь описание изображения

В чем я уверен, так это в том, что байт base64 верен, поскольку я проверил его, добавив непосредственно к элементу src тега img, как показано ниже.

<img src ="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a
HBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy
MjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAUAB0DASIA
AhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA
AAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3
ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm
p6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA
AwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx
BhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK
U1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3
uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDi677T
fhJr99py3UstraPJGHjgmLbwcjhwB8vy5Pc9AQOccDXs9h8ZdKNjD/aNheLebf3ot0Vo8+qksDg9
cHp0yeteFho0ZN+1Z+r5zWzClCH1GN9devp9+p5TreiX3h7VJNP1CLZMnIYcrIvZlPcH/EHBBFZ1
dF408T/8JX4ga+SDyYI4xDCp+8UBJBbtklj06cDnGTztYVFFSajselhJVpUISrq07arzCiiipOgK
KKKAP//Z"> </img>

Я не уверен, как установить это в javascript из переменной. Может ли кто-нибудь дать какие-либо указания относительно того, как это может быть достигнуто? заранее спасибо


person rahul pasricha    schedule 04.12.2012    source источник
comment
У вас есть пробел между <img src\= и "+src3+" />, уберите его. Еще лучше, добавьте цитаты. Еще лучше используйте document.createElement.   -  person Paul S.    schedule 04.12.2012
comment
Удаление пробела или добавление кавычек не решает проблему, строка усекается, поэтому вы вообще не получаете изображения.   -  person VoidMain    schedule 04.12.2012
comment
@VoidMain jsfiddle.net/8wxSs отлично работает без пробелов и кавычек?   -  person Paul S.    schedule 04.12.2012
comment
Ваши данные base64 кажутся поврежденными и/или неполными... Рабочий пример здесь: jsfiddle.net/LnBzX с преобразованием некоторых данных с помощью motobit.com/util/base64-decoder-encoder .asp   -  person Ulflander    schedule 04.12.2012
comment
Достаточно любопытно, что в том же браузере, который я использую, при использовании его вместе с Ext (я проводил тест на странице из приложения, которое я разрабатывал), который не работает, строка всегда усекается...   -  person VoidMain    schedule 04.12.2012
comment
Я вижу, в вашем объявлении var src3=... есть ошибка, что-то не так с данными, если я скопирую данные из вашей переменной, это не сработает, но это сработает, если я скопирую данные, которые чуть ниже, и исправлю новые строки.   -  person VoidMain    schedule 04.12.2012
comment
пространство не было проблемой ... проверка остальных ... Данные base64 также кажутся в порядке, поскольку я напечатал то же самое на другой html-странице ....   -  person rahul pasricha    schedule 04.12.2012
comment
даже я запустил свой код в jsfiddle.net/8wxSs, он работает нормально... не знаю, в чем проблема ......   -  person rahul pasricha    schedule 04.12.2012
comment
я запускал те же фрагменты кода через eclipse (развертывание на tomcat) и проверял страницу результатов в браузере eclipse по умолчанию. Там не отображалось изображение. Когда я запускал тот же URL-адрес в Firefox или Chrome, он отображал изображение. Я предполагаю, что какая-то проблема с браузером по умолчанию eclipse, который не может отображать изображение. Немного странно. Кто-нибудь сталкивался с этой проблемой?   -  person rahul pasricha    schedule 04.12.2012


Ответы (1)


var src3="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAUAB0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1hByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADABAAIRAxEAPwDi677TfhJr99py3UstraPJGHjgmLbwcjhwB8vy5Pc9AQOccDXs9h8ZdKNjD/aNheLebf3ot0Vo8+qksDg9cHp0yeteFho0ZN+1Z+r5zWzClCH1GN9devp9+p5TreiX3h7VJNP1CLZMnIYcrIvZlPcH/EBBFZ1dF408T/8JX4ga+SDyYI4xDCp+8UBJBbtklj06cDnGTztYVFFSajselhJVpUISrq07arzCiiipOgKKKKAP//Z";
document.getElementById("outmessage").innerHTML = "<h2> Image \<img src\= "+src3+" /></h2>";

Вышеупомянутое работает в браузерах (т.е./firefox и т.д.). я запускал те же фрагменты кода через eclipse (развертывание на tomcat) и проверял страницу результатов в браузере eclipse по умолчанию. Там не отображалось изображение. Когда я запускал тот же URL-адрес в Firefox или Chrome, он отображал изображение. Я предполагаю, что какая-то проблема с браузером по умолчанию eclipse, который не может показать изображение

person Community    schedule 11.01.2013