私のHTMLページをロードしているときにBase64イメージ

Question

をロードできません。アンロード関数がAngularJSで書かれています。サーバーからイメージファイルのbase64文字列を取得し、$ scope.product.imageにこのbase64文字列を格納しました。このbase64 文字列を表示しようとすると、コンソールでERR_INVALID_URLエラーが発生します。

エラーメッセージは、次のようになりますGET：データ：画像/ JPG; base64,9j_4AAQSK ..........ネット：ERR_INVALID_URLを私のHTMLは、この

<section ng-show="product.image"> 
      {{product.image}} /* This actually displays the content of base64 string. This confirms that value is reaching properly*/ 
      <img ng-src="{{'data:image/jpg;base64,'+product.image}}"/> 
</section> 

のように見えます

私app.jsは、私が<img data-ng-src="data:image/jpg;base64,{{product.image}}">が、運を試してみました。この

$scope.onload = function() 
{ 
    $http({method:'GET', url:'rest/product/onLoad'}) 
    .success(function (response){ 
     $scope.product.image = response.image; 

    }); 
}; 

のように見えます。

base64文字列をイメージとしてロードするにはどうすればよいですか？

Answer 1

エラーが発生すると、データ自体が正しくないことを意味します。

接頭辞が正しいため、取得するbase64文字列に問題がある必要があります。

ブラウザのアドレスバーにデータURLを入れて、機能するかどうかを確認してください。

Answer 2

は、以下のように使用してみてください：

ng-src="data:image/jpg;base64,{{product.image}}" 

Answer 3

発着信画像データ、このような関数スルー：コントローラで

<img data-ng-src="{{getImage(product.image)}}" /> 

：

$scope.getImage = function(data){ 
    return 'data:image/jpeg;base64,' + data; 
}