Comment faire pour afficher l'Image reçue en tant que tableau d'octets en Angular JS
J'ai un côté serveur de l'application qui va renvoyer une image. Ce sont les en-têtes de réponse:
Content-Disposition: attachment; filename=8822a009-944e-43f4-999b-d297198d302a;1.0_low-res
Content-Length: 502343
Content-Type: image/png
Date: Mon, 03 Aug 2015 19:13:39 GMT
Server: Apache-Coyote/1.1
Angulaire, j'ai besoin d'afficher l'image. Lors de l'obtention de l'image, j'utilise le angularJS $http
pour appeler le serveur et mettre le résultat dans le champ d'application, mais je n'ai jamais atteindre le succès fonction de $http
. L'exécution de cet appel de facteur renvoie l'image normalement. Je suis curieux de comment obtenir Angulaire pour afficher l'image.
C'est la façon dont je l'affichage de l'image:
<img ng-src={{image}} />
Voici l'appel pour obtenir l'image sur le serveur:
$http.get(url, {responseType: "arraybuffer"})
.success(function(data) {
$scope.image= data;
}
)
Pouvez-vous poster le $appel http vers le serveur?
Yup, c'est ici: ` $http.get(url, {responseType: "arraybuffer"} ). succès(function(data) { $scope.image= data; }) `
Yup, c'est ici: ` $http.get(url, {responseType: "arraybuffer"} ). succès(function(data) { $scope.image= data; }) `
OriginalL'auteur Loshmeey | 2015-08-03
Vous devez vous connecter pour publier un commentaire.
Je suis d'accord avec Bellu de la réponse que vous devriez être à l'aide de la
.then
fonction, plutôt que de la.success
fonction de la promesse retourné à partir de la$http.get
. Cependant, j'imagine que vous aurez toujours un problème avec votreng-src
référence que vous n'êtes pas fournir une URL, mais plutôt une référence à votre tableau d'octets.Pour lier votre
ng-src
référence à un tableau d'octets en mémoire sur le client, votre liaison devrait prendre la forme suivante:Modifier
Depuis je n'ai jamais mentionné de façon explicite, la
ng-src
de liaison ci-dessus suppose que votre image est au format base64. HarrisonA fourni une méthode ci-dessous pour convertir la matrice si elle n'est pas déjà au format base64.Pensé à elle. Nous avons eu à coder le arrayBuffer dans la chaîne base64. Tout est bien maintenant 🙂 Merci à vous les gars pour les réponses!
Juste de revenir autour de à ce à partir d'hier. Content que vous l'avez travail! Pour ce que ça vaut, base64 n'est probablement pas le seul format qui fonctionne, c'est juste l'exemple le plus commun. Vous pouvez en savoir plus sur les formats de données de modèles d'URI ici: en.wikipedia.org/wiki/Data_URI_scheme#Format
Va faire! Merci pour l'aide!
Comment puis-je afficher la même chose dans l'option de sélectionner à l'aide de angular js?
OriginalL'auteur jdmcnair
Voulais juste ajouter à jdmcnair réponse et Loshmeey commentaire:
Ci-dessous un lien à la fonction que j'ai utilisé pour convertir le tableau de la mémoire tampon dans une base de 64 chaîne.
ArrayBuffer à chaîne encodée en base64
La fonction:
J'ai utilisé cette fonction dans mon angulaire contrôleur et ensuite le résultat (en utilisant un $portée variable) de l'élément img dans mon fichier html.
OriginalL'auteur HarrisonA
la documentation ils disent que le succès rappel a été
déconseillé.
Après ces considérations, vous pouvez essayer quelque chose comme cela.
OriginalL'auteur Bellu