Загрузка изображения src с использованием переменной, содержащей данные base64 в AngularJS

Загрузка изображения с использованием переменной, содержащей данные base64 в AngularJS

Я пытаюсь найти правильный способ загрузки источника изображения из переменной, содержащей base64 закодированные данные изображения (например, извлеченные из холста с использованием toDataURL(); ).

Сначала я просто попробовал это так:

<img src="{{image.dataURL}}" />

где изображение является переменной области видимости с переменной dataURL, содержащей данные base64. Это на самом деле работает довольно хорошо, единственная проблема в том, что я получаю ошибку 404 в своей консоли. Что-то вроде этого:

ПОЛУЧИТЬ http://www.example.com/%7B%7Bimage.dataURL%7D%7D 404 (не найдено)

Не так красиво. Когда я попробовал более угловатое решение, подобное этому:

<img data-ng-src="image.dataURL" />

изображения вообще не загружаются. Я сделал скрипку, которую вы можете найти ЗДЕСЬ< /кбд>

Любые предложения, как избавиться от этой ошибки в моей консоли?


РЕДАКТИРОВАТЬ:

Граф Банни был прав. Этот <img data-ng-src="{{image.dataURL}}" /> работает...

Рабочее решение можно найти ЗДЕСЬ


person Wilt    schedule 25.02.2014    source источник


Ответы (2)


Содержимое ng-src необходимо интерполировать: попробуйте следующее:

<img data-ng-src="{{image.dataURL}}"/>
person Gruff Bunny    schedule 25.02.2014
comment
Обратите внимание, что изображение должно быть в полной схеме Data URI: "data:image/png;base64,iVBORw0...". Если вы, как и я, используете angular-base64-upload, вы возможно, придется вручную отформатировать его таким образом. - person metakermit; 27.03.2015
comment
@ kermit666 Токен : доставляет мне проблемы. Как вы это решили? - person Sebastialonso; 09.06.2015
comment
У меня была эта проблема весь день. Все еще не могу получить его независимо от того, как я его форматирую. Хотя это на Ionic. Есть идеи? - person mikeLspohn; 30.07.2015

Я признаю, что потратил слишком много времени, пытаясь решить подобную проблему,

моя проблема заключалась в том, что у меня была дополнительная скобка здесь (см. три скобки в конце):

 ng-attr-src="{{aad.form.imageBase64Temp}}}"
person Erti-Chris Eelmaa    schedule 22.05.2016