http angulaire: comment appeler des images avec des en-têtes personnalisés?

Dans la vue html, les images sont affichées comme ceci:

<img ng-src="{{element.image.url}}">

element.image.url pointe vers une url comme: /rest_api/img/12345678.

Cela fonctionne bienles images sont affichées.

Maintenant, j'ai ajouter une authentification:

Avant que l'utilisateur est authentifié, toutes les ressources de répondre avec une erreur http 401, les images aussi. Lorsque l'authentification réussit, un jeton est placé dans un des en-têtes personnalisés et envoyés avec chaque tranche de requêtes http, permettant l'accès aux ressources:

$http.defaults.headers.common['Authorization'] = token;

Cela fonctionne bien pour des fichiers Json chargé avec $ressource. Mais les liens directs vers les images sont encore 401 après l'authentification.

Comment appeler les images avec les en-têtes personnalisés?

Ou des conseils sur comment je dois faire.

source d'informationauteur

  1. 8

    Il y a un varient de réponse simple. Vous devez utiliser: angulaires-img-http-src.

    Problème:

    Vous utilisé la base de jetons d'authentification et vous devez vous servir des images à partir d'sécurisé
    les itinéraires.

    Solution:

    Utiliser http src au lieu de ng-src et il va chercher des images à l'aide de la
    $http service - sens de l'Autorisation en-têtes ajoutés via des intercepteurs
    seront présent - alors construire un Blob et de l'ensemble de la src à un objectURL.

    Il fonctionne parfaitement sur mon projet.

  2. 8

    Comme l'a dit ici vous pouvez utiliser angulaires-img-http-src (bower install --save angular-img-http-src si vous utilisez Bower).

    Si vous regardez le codeil utilise URL.createObjectURL et URL.revokeObjectURL qui sont toujours en projet le 19 avril 2016. Donc regardez si votre navigateur prend en charge.

    Pour l'utiliser, déclarer 'angular.img' comme une dépendance à votre application module (angular.module('myapp', [..., 'angular.img'])), puis dans le HTML, vous pouvez utiliser http-src attribut pour <img> tag.

    Dans votre exemple, il serait: <img http-src="{{element.image.url}}">

    Bien sûr, cela implique que vous avez déclaré un intercepteur à l'aide de $httpProvider.interceptors.push pour ajouter le votre en-tête personnalisé ou que vous avez défini de manière statique de votre en-tête pour toutes les demandes à l'aide de $http.les valeurs par défaut.les en-têtes.commun.MyHeader = 'valeur';

  3. 2

    Je suis confronté au même problème.
    La meilleure solution que j'ai trouvé est le passage du jeton d'Autorisation en tant que paramètre de requête.

    Par exemple :

    <img src="http://myhost.com/image/path?accessToken=123456789" >

    De cette façon, vous pouvez obtenir ces images uniquement pour votre REPOS consommateurs.

  4. -1

    Autant que je sache, il n'est pas possible de passer d'autres en-têtes actifs demandes (les scripts, les images, les médias, les fichiers CSS, le navigateur charge pendant le rendu de la page). C'est le tout contrôlé par le navigateur. Seulement lors de la prise de XHR (AJAX) demande pouvez-vous modifier les en-têtes.

    Je suggère de regarder à votre authentification côté serveur et de voir si il y a une solution.