Question

这可能有点像新手，但我真的不知道如何处理这个问题。

任何人都可以通过角度$ http.get电话呼叫后，向我推荐一种从烧瓶后端传送图像的方法吗？

我想要做的简要示例。

//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>

正如您所看到的，我正在尝试从烧瓶后端向前端提供原始字节.png图像。

我尝试过这样的事情

<html>
    <img src= "/get_image/">
</html>

但麻烦的是，＆＃39; get_image_binary＆＃39;需要一段时间才能运行，并且在图像准备好提供之前加载页面。我希望图像只有在准备就绪时才会异步加载到页面上。

同样，我确信有很多方法可以做到这一点，可能是内置于角度本身的东西，但是很难将其表达为google-able搜索。

Answer 1

不能对烧瓶说话，但下面是一些AngularJS代码。

此指令不会替换源属性，直到Angular操纵DOM并且浏览器呈现（AngularJS : $evalAsync vs $timeout）之后。

<强> 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

中的相同代码

使用角度http.get调用非同步加载图像

1 个答案: