0

嗨，我正在用 angularjs 制作一个相册应用程序，它从我的服务器中抓取 base-64 编码的图像字符串并将它们解码为图像。

问题是我的 angularjs 应用程序似乎无法解码 base64 字符串。在我的模板上，它显示未找到图像图标。当我像这样将它直接嵌入到模板时，我检查了 base64 字符串和它的罚款：

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

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

任何人都可以帮助解决这个问题吗？

这是我的代码：

指令.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)


            });
        }
    }
}]);

模板.html

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

    <photoalbums-display></photoalbums-display>

</div>
4

1 回答 1

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]
        });
    }
});
于 2013-09-11T00:04:53.787 回答