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

标签 image angularjs base64 loading data-url

使用包含 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

最佳答案

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

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

关于image - 在 AngularJS 中使用包含 base64 数据的变量加载图像 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22018776/

相关文章:

python - Tkinter 图像未显示在 Canvas 上

javascript - 注入(inject) ngMock 后应用程序崩溃

python - 我想将base64转换为json

JAVASCRIPT将base64字符串(这是一个编码的zip文件)解码为zip文件并按名称获取zip文件内容

javascript - 如何在用户滚动页面时触发图像移动?

javascript - 大图像在 Chrome 中缓慢绘制,从上到下逐渐绘制

html - CSS:如何在内容的左侧和右侧制作背景

javascript - 如何将参数传递给 $routeProvider 中的 Controller ?

html - 使用 AngularJS 动态变暗当前背景颜色

html - CSS 中的 Base64 图标与多种用途的外部图像的性能