Angular JSのsrcにイメージblobを適用しますか？

Question

私はイメージを提供するいくつかのAPIエンドポイントを持っていますが、イメージには認証が必要です。私は、$ httpを超えて抽象化され、認証トークン管理を扱うサービス（authenticatedHttp）を持っています。 （これは動作することが確認されており、すべての目的と目的のためにも同様に$http）

私は応答を受け取り、BLOBを取得してオブジェクトURLを作成しています。これらはすべて動作します。私はブロブをチェックし、それが正しいことを確認することができます。

objectUrlをsrcに適用しようとすると問題が発生します。私は作品を知っており、認証なしのスニペットを使って簡単な例を試みました。これはAngularアプリでは機能しませんが、vanilla JSで動作します。

私はObjectUrlについて多くを知らないが、それは違いを作る場合、私は点検したときに、私はそれがsrcだことがわかり、空のイメージは正しいです、そして私が作成したリンクをクリックした場合には（例を。blob:https://sub.domain.dev/de4db0e0-77c8-44bc-a934-0d270ab81687）私がによってリダイレクトされますui-router。

なぜこのようなことが起こり、どうすれば修正できますか？

app.directive('authenticatedSrc', ['authenticatedHttp', function (authenticatedHttp) { 
    var directive = { 
     link: link, 
     restrict: 'A' 
    }; 
    return directive; 
    function link(scope, element, attrs) { 
    var requestConfig = { 
     cache: 'false' 
    }; 
    authenticatedHttp.get(attrs.authenticatedSrc, requestConfig).then(function(response) { 
     var objectUrl = window.URL.createObjectURL(new Blob([response.data], { type: 'image/png' })); 
     attrs.$set('src', objectUrl); 
    }); 
    } 
}]); 

Answer 1

@Kaiidoも正解でしたが、それは私の主な問題ではありませんでした。

@georgeawgが私の問題の大半を解決しましたが、彼の実装（ソースとしてブロブを直接使用）がうまくいかなかったため、私は彼の答えを受け入れませんでした。

これは私の最終的なコードです。将来のために

app.directive('authenticatedSrc', ['authenticatedHttp', function (authenticatedHttp) { 
    var directive = { 
     link: link, 
     restrict: 'A' 
    }; 
    return directive; 
    function link(scope, element, attrs) { 
    var requestConfig = { 
     cache: 'false', 
     responseType: 'blob' 
    }; 
    authenticatedHttp.get(attrs.authenticatedSrc, requestConfig).then(function(response) { 
     var reader = new window.FileReader(); 
     reader.readAsDataURL(response.data); 
     reader.onloadend = function() { 
     attrs.$set('src', reader.result); 
     }; 
    }); 
    } 
}]); 

Answer 2

response.dataの戻り値の種類は何ですか。それはbase64でエンコードされた文字列ですか？ imgタグは、src属性で直接指定した場合、base64でエンコードされたイメージをうまく表示できます。 さらに、このobjectUrlを有効なURLとして信頼するために、angularjsの$ sceサービスを試してください。 src属性に追加中に$ sce.trustAsURL（objectUrl）。 詳細情報https://docs.angularjs.org/api/ng/service/ $のSCE

Answer 3

バイナリ情報をダウンロードする場合、responseTypeを設定することが重要である：

app.directive('authenticatedSrc', ['authenticatedHttp', function (authenticatedHttp) { 
    var directive = { 
     link: link, 
     restrict: 'A' 
    }; 
    return directive; 
    function link(scope, element, attrs) { 
    var requestConfig = { 
     //IMPORTANT 
     responseType: 'blob', 
     cache: 'false' 
    }; 
    authenticatedHttp.get(attrs.authenticatedSrc, requestConfig).then(function(response) { 
     //var objectUrl = window.URL.createObjectURL(new Blob([response.data], { type: 'image/png' })); 
     var blob = response.data; 
     attrs.$set('src', blob); 
    }); 
    } 
}]); 

そうでない場合は、データがUTF-8からDOMstring (UTF-16)への変換によって壊れました。

詳細については、MDN XHR API ResponseTypeを参照してください。