Utilisation de CDN avec <img> Tags

Question

Je viens d'ajouter un service CDN pour accélérer le chargement de mon site Web. J'ai une question concernant les photos qui sont récupérées en utilisant un tag <img>.

J'ai bien des cas comme celui-ci:

// userProfile.thumbnailPhotoSrc = some/relative/path.png  
ng-src="{{userProfile.thumbnailPhotoSrc}}" 

(j'utiliser AngularJS). Au démarrage, j'ai un script qui enregistre le point de terminaison CDN à window.cdn variable. Dans le cas où le script décide qu'il n'y a pas point final disponible:

window.cdn = ''; 

Je veux être capable de faire quelque chose comme:

ng-src="window.cdn + {{userProfile.thumbnailPhotoSrc}" 

Mais cela est impossible, comme window.cdn n'est pas évalué. Mais ni cela fonctionne:

ng-src="{{window.cdn + userProfile.thumbnailPhotoSrc}" 

Parce que je ne peux accéder à $scope propriétés sous {{}}. Je ne peux pas enregistrer le point de terminaison CDN à $scope, car il existe un $scope pour chaque contrôleur (j'en ai beaucoup, ce n'est pas maintenable).

La dernière chose que je pensais, dans l'espoir ng-src permet que - est l'ajout d'une fonction de transformation qui est exécutée sur tout ng-src attribut, mais je ne pouvais pas trouver comment faire.

Que suggérez-vous que je fasse? gardez à l'esprit que je voudrais que le site Web récupère la photo du CDN et se replie sur le serveur d'origine (récupère le chemin relatif) en cas de dysfonctionnement du CDN. Comment puis-je obtenir ce comportement?

Merci

Answer 1

Vous pouvez créer un custom filter dans angulaire

alors que vous auriez alors dans vos modèles:

ng-src="{{userProfile.thumbnailPhotoSrc | cdn}" 

Vous pouvez ajouter le service $window comme une dépendance au service de filtre afin vous n'avez pas à le retirer de l'objet global et vous pouvez également tester le filtre.

Answer 2

Si vous essayez de mettre à jour tous les src <img>. Vous pouvez créer une directive:

angular.module('imageCdnSrc', []) 
.directive('img',['$interpolate', function($interpolate) { 
    return { 
    restrict: 'E', 
    scope: false, 
    compile: function(element, attrs) { 
     var ngSrc = attrs.ngSrc; 
     delete attrs.ngSrc; // prevent ngSrc directive to trigger 

     return function($scope,element,attrs) { 
     var ngSrcVal = $interpolate(ngSrc)($scope); //returns the string value of ngSrc 

     /* Add Logic Below to decide what to do */ 
     if(window.cdn && ngSrcVal && ngSrcVal.length>0){ 
      attrs.ngSrc = window.cdn + ngSrcVal; 
      /* if image fails to load with cdn, load the default */ 
      element.one('error', function() { 
      angular.element(this).attr("src", ngSrcVal); 
      }); 
     } 
     else{ 
      attrs.ngSrc = ngSrcVal; 
     } 
     };  
    } 
    }; 
}]);