Question

您好我正在使用angularjs制作photoalbum应用程序，该应用程序从我的服务器获取base-64编码图像字符串并将其解码为图像。

问题是我的angularjs app似乎无法解码base64字符串。在我的模板上，它显示找不到图像的图标。当我将它直接嵌入到模板中时，我检查了base64字符串及其罚款：

 <p><img src="data:image/jpeg;charset=utf-8;base64, /9j/4AAQSkZJRgABAQEBLA...etc.</p>'

图像将显示。但是，我需要从我的客户指令（下面的代码）中的服务中获取photoalbum数据。

有人可以帮忙解决这个问题吗？

这是我的代码：

directive.js

 .directive('photoalbumsDisplay', ['$compile', 'myprofileService', function($compile,       
 myprofileService) {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            myprofileService.retrieve_albums().then(function(data) {
                var html = [];
                for (var p = 0; p < data.length; p++) {
                    //album photos array
                    var pic = data[p];

                    html += '<p><img src="data:image/jpeg;base64, ' + pic + '"/></p>';
                }

                element.replaceWith(html)


            });
        }
    }
}]);

template.html

 <div data-ng-controller="photogalleryCtr" data-ng-init="init()">

    <photoalbums-display></photoalbums-display>

</div>

Answer 1

您可以尝试使用ng-src而不是src，并从指令中的范围获取照片，而不是将它们放入指令中：

http://docs.angularjs.org/api/ng.directive:ngSrc

然后你可以在你的标记中做到这一点：

<photoalbums-display="photos"></photoalbums-display>

并改变你的指令：

app.directive('photoalbumsDisplay', function () {
    return {
        restrict: 'E',
        scope: {
            photos: '=photos'
        },
        template: '<p ng-repeat="photo in photos">' +
            '<img ng-src="data:image/jpeg;base64, {{photo.data}}"></p>'
    };
});

并通过必要的注射将其添加到您的控制器中：

$scope.photos = [];
myprofileService.retrieve_albums().then(function(data) {
    var i, length;
    for (i = 0, length = data.length; i < length; i += 1) {
        $scope.photos.push({
            data: data[i]
        });
    }
});

Angularjs相册

1 个答案: