AngularJS: ng-класс для динамического изображения в кодировке base64 в качестве фонового изображения

Кому-нибудь еще удалось использовать ng-class для размещения динамических изображений в кодировке base64 в качестве фоновых изображений для div? Кажется, работает для JQuery (см. in-javascript">Есть ли способ установить background-image как изображение в кодировке base64 в javascript?), но я еще не нашел решения для AngularJS. Этот мой подход, похоже, не работает:

<div class="col-xs-2" ng-style="{'background-image':'url(data:image/jpeg;base64,{{dynamicImage}})'}">...</div>

dynamicImage содержит строку изображения base64, которая загружается на лету через веб-службу REST. Есть идеи, работает ли это вообще и как?


javascript html css angularjs ng-style
person Igor P.    schedule 03.04.2016    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Не используйте интерполяцию {{}} внутри ng-style, которая вызовет ошибку $parser при вычислении этого выражения. Просто выполните string конкатенацию внутри ng-style.

<div class="col-xs-2" 
  ng-style="{'background-image':'url(data:image/jpeg;base64,'+dynamicImage+')'}">
person Pankaj Parkar    schedule 03.04.2016
comment
Не уверен, почему, но «{{}}» хорошо работал для указания типа, т.е. data:image/{{img.type}}, но не для самих данных. Поэтому мы должны использовать конкатенацию только для данных - person La masse; 28.09.2017