0

こんにちは、サーバーからbase-64でエンコードされた画像文字列を取得し、それらを画像にデコードするangularjsを使用してフォトアルバムアプリを作成しています。

問題は、私の 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)


            });
        }
    }
}]);

template.html

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

    <photoalbums-display></photoalbums-display>

</div>
4

1 に答える 1

1

src の代わりに ng-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 に答える