web-dev-qa-db-fra.com

Chargement de l'image src à l'aide d'une variable contenant des données base64 dans AngularJS

Chargement de l'image à l'aide d'une variable contenant des données base64 Dans AngularJS

J'essaie de trouver la bonne façon de charger une source d'image à partir d'une variable contenant des données d'image encodées base64 (Par exemple extraite d'un canevas à l'aide de toDataURL();).

Au début, je l'ai juste essayé comme ceci:

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

où l'image est une variable de portée avec une variable dataURL contenant les données base64. Cela fonctionne plutôt bien, le seul problème est que j'obtiens une erreur 404 Dans ma console. Quelque chose comme ça:

GET http://www.example.com/%7B%7Bimage.dataURL%7D%7D 404 (introuvable)

Pas si joli. Quand j'ai essayé une solution de style plus angular comme celle-ci:

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

les images ne se chargent pas du tout. J'ai fait un violon que vous pouvez trouver HERE

Des suggestions sur la façon de se débarrasser de cette erreur dans ma console?


MODIFIER:

Gruff Bunny avait raison. Ce <img data-ng-src="{{image.dataURL}}" /> Fonctionne ...

Une solution de travail peut être trouvée HERE

28
Wilt

Le contenu du ng-src doit être interpolé: Essayez ceci:

<img data-ng-src="{{image.dataURL}}"/>
46
Gruff Bunny