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

Question

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

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

起初我只是这样尝试的:

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

其中图像是具有变量 dataURL 的范围变量包含 base64数据。这实际上工作得很好，唯一的问题是我得到了 404我的控制台中的错误。像这样的东西:

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

没那么漂亮。当我尝试这样一个更有棱 Angular 的解决方案时:

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

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

任何建议如何在我的控制台中摆脱这个错误？

编辑:

Gruff Bunny 是对的。此 <img data-ng-src="{{image.dataURL}}" />正在工作...

可以找到工作解决方案 HERE

Answer 1

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

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