这可能有点新奇，但我真的不知道如何解决这个问题。
在被 Angular $http.get 调用调用后，谁能推荐我一种从 flask 后端传递和图像的方法？
我正在尝试做的事情的简短示例。
//javascript code
myApp.controller('MyCtrl', function($scope, $http){
$http.get('/get_image/').success(function(data){
$scope.image = data;
});
});
#flask back end
@app.route('/get_image/', methods= ['GET', 'POST'])
def serve_image():
image_binary = get_image_binary() #returns a .png in raw bytes
return image_binary
<!-- html -->
<html ng-app= "myApp">
<div ng-controller= "MyCtrl">
{{ image }}
</div>
</html>
如您所见，我正在尝试从 flask 后端向前端提供原始字节的 .png 图像。
我试过这样的东西
<html>
<img src= "/get_image/">
</html>
但问题是，“get_image_binary”需要一段时间才能运行，并且页面在图像准备好之前加载。我希望图像仅在准备好时才异步加载到页面。
再说一次，我确信有很多方法可以做到这一点，可能是 Angular 本身内置的东西，但很难将它用谷歌搜索来表达。
最佳答案
不能说 flask 的东西，但下面是一些 AngularJS 代码。
在 Angular 操作 DOM 并且浏览器呈现 ( AngularJS : $evalAsync vs $timeout ) 之前，该指令不会替换 source 属性。
HTML:
<div ng-controller="MyController">
<img lazy-load ll-src="http://i.imgur.com/WwPPm0p.jpg" />
</div>
JS:
angular.module('myApp', [])
.controller('MyController', function($scope) {})
.directive('lazyLoad', function($timeout) {
return {
restrict:'A',
scope: {},
link: function(scope, elem, attrs) {
$timeout(function(){ elem.attr('src', attrs.llSrc) });
},
}
});
工作中的相同代码 JSFiddle
关于image - 使用 Angular http.get 调用异步加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23253050/