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

Question

使用AngularJS

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

我正在尝试从包含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" />

图像根本没有加载。 我做了一个小提琴你可以找到 HERE

有关如何在我的控制台中摆脱此错误的任何建议吗？

---

编辑：

Gruff Bunny是对的。这个<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}}}"