Angularjs：画像データをIMGタグに設定するには

問題を詳しく教えてください。Angularjs：画像データをIMGタグに設定するには

I画面に、以下に示すようなデータとして画像を返すAPIを押すことでユーザプロファイルPICをフェッチしてい私はIMGタグのSRCにおけるAPI URLをSEができない

ショットgetリクエストを使用してheadersにaccess tokenを渡す必要があるためです。ここで

あなたはAngularJSを使用しているので、私は

vm.getDp = function() { 
    if (vm.userDetails.hasDp) { 
     userService.getProfilePic(vm.userDetails.id, vm.userDetails.profileImageUrl, accessToken) 
      .then(function (data) { 
       $("#theDp").attr('src', 'data:image/jpg;base64,' + data); 
      }, function (error) { 

      }); 
    } 
}

出典

2016-09-09 Vikas Bansal

質問は何ですか？ –

@MaartenBicknese「画像データ」を「img」タグに設定できません。 APIからIMGタグに取得している画像データを設定するには？ –

をやっているコードは、私たちのものを行うためにはjQueryの使用を停止することができますです。 ngSrcディレクティブを使用して、スコープ変数を画像のsrc属性にバインドすることができます。

のでディレクティブ

<img ng-src="{{vm.img_data}}" alt="Description" />

であなたのHTMLを用意することによりあなたはその後、取得したデータを設定して画像を表示することができます。あなたはngIfディレクティブであなたのimg要素をラップする可能性が壊れたイメージを示す防ぐため

vm.getDp = function() { 
    if (vm.userDetails.hasDp) { 
     userService.getProfilePic(vm.userDetails.id, vm.userDetails.profileImageUrl, accessToken) 
      .then(function (data) { 
       vm.img_data = 'data:image/jpg;base64,' + data; 
      }, function (error) { 

      }); 
    } 
}

。

例
画像である小さな赤い点に注意してください。

angular.module('app', []); 
 

 
angular 
 
    .module('app') 
 
    .controller('ImageShower', ImageShower); 
 

 
function ImageShower($scope) { 
 
    var vm = this; 
 
    vm.image_data = false; 
 
    vm.title = 'Image Shower'; 
 

 
    activate(); 
 

 
    function activate() { 
 
    vm.image_data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg=='; 
 
    } 
 
}

<!doctype html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Your Shopping Cart</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="ImageShower as vm"> 
 
    <h1>{{vm.title}}</h1> 
 
    <img ng-src="{{vm.image_data}}" alt="Description" /> 
 
    <p>{{vm.image_data}}</p> 
 
</body> 
 

 
</html>

出典

2016-09-09 11:11:46

も機能しません。私はもう1つのスクリーンショットを追加しました。 –

新しい例で分かるように、このメソッドは機能します。あなたのスクリーンショットについてもう少し詳しく教えてください。問題は他の場所にあるようです。 –

その赤い点は写真ではありませんが、それは別のものです。（画像をキャプチャするボタン）スクリーンショットの詳細を教えてください。 –

Angularjs：画像データをIMGタグに設定するには

答えて

関連する問題