使用AngularJS中包含base64数据的变量加载image src

Question

使用AngularJS中包含base64数据的变量加载图像

我正试图找到从包含base64编码的图像数据的变量加载图像源的正确方法(例如，使用toDataURL();从画布中提取)。

起初我只是这样尝试：

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

其中图像是具有包含CCD_ 5数据的变量CCD_。这实际上运行得很好，唯一的问题是我的控制台中出现了404错误。类似这样的东西：

GEThttp://www.example.com/%7B%7Bimage.dataURL%7D%7D404(未找到)

不太好看。当我尝试这样一个更有棱角的解决方案时：

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

图像根本没有加载。我做了一把小提琴，你可以在这里找到

有什么建议可以在我的控制台中消除这个错误吗？

---

编辑：

脾气暴躁的兔子是对的。这个<img data-ng-src="{{image.dataURL}}" />正在工作。。。

工作解决方案可在HERE中找到

Answer 1

需要插入ng src的内容：试试这个：

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

Answer 2

我承认我花了太多时间试图解决类似的问题，

我的问题是我这里有额外的支架(见最后的三个支架)：

ng-attr-src="{{aad.form.imageBase64Temp}}}"