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

Question

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

我试图找到从包含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}}"/>