Angular Ionic Cordova - 默認圖像源指令

使用Angular/Ionic/Cordova的某些組合，如果請求圖像不存在，我如何動態設置圖像源爲默認值。注意：我知道這可以通過一個OnError指令完成，但是這會產生一個臨時問號圖像，我想避免這個問題。也許正在進行Cordova文件調用？Angular Ionic Cordova - 默認圖像源指令

<img ng-src="{{employee.id}}.jpg" df-img-src="default.jpg"/>

讓事情更進一步，處理未知文件擴展名的問題。假設員工圖片可以以gif，png，jpg或jpeg結尾，並且我想要設置文件系統上存在的image-src。

來源

2014-09-25 vicsz

使用此指令。

app.directive('fallbackSrc', function() { 
    return{ 
     link: function postLink(scope, element, attrs) { 
      element.bind('error', function() { 
       angular.element(this).attr("src", attrs.fallbackSrc); 
      }); 
     } 
    } 
});

用法：

<img ng-src="{{employee.id}}.jpg" fall-back-src="default.jpg"/>

否則創建實際源的指令，像下面

app.directive('actualSrc', function() { 
    return{ 
     link: function postLink(scope, element, attrs) { 
      attrs.$observe('actualSrc', function(newVal, oldVal){ 
       if(newVal != undefined){ 
        var img = new Image(); 
        img.src = attrs.actualSrc; 
        angular.element(img).bind('load', function() { 
         element.attr("src", attrs.actualSrc); 
        }); 
       } 
      }); 

     } 
    } 
});

用法：

<img actual-src="{{employee.id}}.jpg" ng-src="default.jpg"/>

Pluker

來源

2014-09-25 15:42:30

這是我嘗試過。但是它會導致一個「？」默認加載之前的圖像。我想知道他們是否是避免這種情況的一種方法，即只要求提供正確的圖像。 – vicsz 2014-09-25 15:56:47

嘿@vicjugador嘗試更新的代碼。 – 2014-09-25 17:47:05

更好..但似乎該指令在{{employee.id}}被注入之前被調用（和失敗）。因此默認圖像仍然顯示。如果我硬編碼員工編號，事情會正常工作。 – vicsz 2014-09-26 13:45:52

我只是在@Subash Selvaraj's solution中進行了一些改進，以便仔細檢查錯誤並確保將默認圖像加載到各種錯誤中。

(function (Directives) { 
    Directives.directive('fallbackSrc', function() { 
     return { 
      link: function postLink(scope, element, attrs) { 
       element.bind('error', function() { 
        angular.element(this).attr("src", attrs.fallbackSrc); 
       }); 
      } 
     } 
    }); 

    Directives.directive('actualSrc', function() { 
     return { 
      link: function postLink(scope, element, attrs) { 
       attrs.$observe('actualSrc', function (newVal, oldVal) { 
        if (newVal != undefined) { 
         var img = new Image(); 
         img.src = attrs.actualSrc; 
         angular.element(img).bind('load', function() { 
          element.attr("src", attrs.actualSrc); 
         }); 

         angular.element(img).bind('error', function() { 
          element.attr("src", attrs.fallbackSrc); 
         }); 
        } 
       }); 
      } 
     } 
    }); 
})(Directives);

<img fall-back-src="img/PerfilPadrao.png" actual-src="{{UrlPhoto}}">

來源

2017-04-27 18:00:44

Angular Ionic Cordova - 默認圖像源指令

回答

相關問題