Angularjs: Wie man Bilddaten zum IMG Tag

setzt Bitte lassen Sie mich das Problem ausarbeiten.Angularjs: Wie man Bilddaten zum IMG Tag

I Benutzerprofil pic bin holen, indem sie ein api schlagen, das Bild als Daten zurückgibt, wie unten im Bildschirm angezeigt Schuss

Ich kann die api-URL in der IMG-Tag src se weil ich access token in der headers mit der Anforderung erhalten muss.

Hier ist der Code, den ich

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) { 

      }); 
    } 
}

Quelle

2016-09-09 Vikas Bansal

Was ist die Frage? –

@MaartenBicknese Ich bin nicht in der Lage, "Bilddaten" auf "img" -Tag zu setzen. Wie setze ich Bilddaten, die ich vom API bekomme, auf das IMG-Tag? –

Da Sie AngularJS verwenden tue, lässt jQuery aufhören, unsere Sachen zu tun. Sie können die -Direktive verwenden, um Bereichsvariablen an das src-Attribut eines Bildes zu binden.

So indem Sie Ihre HTML mit der Richtlinie vorbereiten können

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

Sie dann Ihr Bild zeigen, indem sie die abgerufenen Daten einstellen.

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) { 

      }); 
    } 
}

Um zu verhindern, ein gebrochenes Bild zeigen Sie Ihr img Element in einer ngIf Richtlinie wickeln könnten.

Beispiel
Beachten Sie den kleinen roten Punkt, der das Bild ist.

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>

Quelle

2016-09-09 11:11:46

das funktioniert auch nicht. Ich habe 1 weiteren Screenshot in der Frage hinzugefügt, bitte überprüfen. –

Wie Sie im neuen Beispiel sehen können, funktioniert diese Methode. Kannst du mehr über deinen Screenshot erzählen? Die Probleme scheinen anderswo zu sein. –

dieser rote Punkt ist nicht das Bild, aber es ist etwas anderes. (eine Schaltfläche zum Aufnehmen von Bildern) Bitte lassen Sie mich wissen, was kann ich Ihnen mehr über den Screenshot sagen –

Angularjs: Wie man Bilddaten zum IMG Tag

Antwort

Verwandte Themen