28

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

4

2 回答 2

46

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

<img data-ng-src="{{image.dataURL}}"/>
于 2014-02-25T15:34:21.300 回答
-4

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

我的问题是我在这里有额外的大括号(最后看三个大括号):

 ng-attr-src="{{aad.form.imageBase64Temp}}}"
于 2016-05-22T16:10:59.233 回答