在AngularJS中使用包含base64数据的变量加载图像src [英] Loading image src using a variable containing base64 data in AngularJS
问题描述
在AngularJS中使用包含base64
数据的变量加载图像
我正在尝试找到从包含 base64
编码图像数据的变量加载图像源的正确方法(例如使用 toDataURL();
从画布中提取).
一开始我只是这样尝试:
<img src="{{image.dataURL}}"/>
其中图像是一个范围变量,其中包含 base64
数据的变量 dataURL
.这实际上工作得很好,唯一的问题是我在控制台中收到 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屋!