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

Question

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" />

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

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

---

编辑：

格鲁夫兔子是对的。这<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}}}"