使用带有 <img> 标签的 CDN

Question

我刚刚添加了一个 CDN 服务来加快我的网站加载速度。 我对使用<img> 标签获取的照片有疑问。

我有很多这样的案例：

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

（我使用 AngularJS）。

在启动时，我有一个将 CDN 端点保存到 window.cdn 变量的脚本。 如果脚本确定没有可用的端点：

window.cdn = '';

所以我希望能够做类似的事情：

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

但这是不可能的，因为 window.cdn 没有被评估。但这都不起作用：

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

因为我只能访问{{}} 下的$scope 属性。 我无法将 CDN 端点保存到 $scope，因为每个控制器都存在一个 $scope（我有很多，这是不可维护的）。

我想到的最后一件事是，希望 ng-src 允许这样做 - 添加一个在任何 ng-src 属性上运行的转换函数，但我找不到如何做到这一点。

你建议我做什么？请记住，如果 CDN 出现故障，我希望网站从 CDN 获取照片并回退到源服务器（获取相对路径）。我怎样才能获得这种行为？

谢谢

Answer 1

你可以在 Angular 中创建一个custom filter

然后你会在你的模板中：

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

您可以将 $window 服务作为依赖项添加到过滤器服务中，这样您就不必从全局对象中拉取它，您也可以测试过滤器。

Answer 2

如果您尝试更新所有<img> 标签的src。你可以创建一个指令：

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;
        }
      };      
    }
  };
}]);