在 AngularJS 中使用包含 base64 数据的变量加载图像 src [英] Loading image src using a variable containing base64 data in AngularJS

问题描述

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

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

起初我只是这样尝试的:

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

其中图像是一个范围变量，其变量 dataURL 包含 base64 数据.这实际上工作得很好，唯一的问题是我的控制台出现 404 错误.像这样:

<块引用>

GET

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

<小时>

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

可以在此处

解决方案

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

Loading image using variable containing base64 data in AngularJS

I am trying to find the right way to load a image source from a variable containing base64 encoded image data (for example pulled from a canvas using toDataURL(); ).

At first I just tried it like this:

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

where the image is a scope variable with a variable dataURL containing the base64 data. This is actually working pretty well, the only problem is that I get a 404 error in my console. Something like this:

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

Not so pretty. When I tried a more angular style solution like this:

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

the images are not loading at all. I made a fiddle which you can find HERE

Any suggestions how to get rid of this error in my console?

---

EDIT:

Gruff Bunny was right. This <img data-ng-src="{{image.dataURL}}" /> is working...

Working solution can be found HERE

解决方案

The content of the ng-src needs to be interpolated: Try this:

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

这篇关于在 AngularJS 中使用包含 base64 数据的变量加载图像 src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！