AngularJS ngSrc - 当前路径不存在时的默认路径

Question

我将此图像html标记与angularJS＆＃39; S ngSrc一起使用，如下所示：

 <img data-ng-src="assets/img/{{documentFile.ending}}.PNG" alt="" title="Dateiendung {{documentFile.ending}}" />

如果 documentFile.ending 不存在，ngSrc是否有使用其他路径的方法 - 如果不存在则使用而不是使用默认路径？

Answer 1

ngSrc指令没有该功能。

您可以使用$http服务检查资源是否存在：

// app.js
(function() {

  'use strict';

  angular.module('app', []);

})();

// main.controller.js
(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = ['$http'];

  function MainController($http) {

    var vm = this;

    // set image uri's
    var myImageUri = "http://example.com/myimagedoesntexist.png";
    var myFallbackImageUri = "http://placehold.it/350x150?text=My+fallback+image";

    // make a http get request to check if the image exists
    $http.get(myImageUri).then(function() {

      // successful response status code so image exists

      // use image uri
      vm.myImageUri = myImageUri;

    }, function() {

      // non-success response status code so image does not exist

      // use fallback image uri
      vm.myImageUri = myFallbackImageUri;

    });

  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as MainCtrl">

  <img data-ng-src="{{MainCtrl.myImageUri}}" alt="..." title="" />

</div>

Answer 2

是的，您可以使用逻辑运算符||，如果第一个操作数是伪造的，则返回第二个操作数的值

<img data-ng-src="assets/img/{{documentFile.ending || 'default-image.png'}}.PNG" alt="" title="Dateiendung {{documentFile.ending}}" />

如果documentFile.ending具有真值（即字符串），但图像不存在于服务器上，则可以编写一个简单的指令来处理错误。

＆＃13;

＆＃13;

angular.module('test', [])
  .controller('test', function ($scope) {
    $scope.correct_image = 'https://unsplash.it/200';
    $scope.wrong_image = 'https://unsplas123123h.it/200';
  })
  .directive('imageDispatch', function () {
    return {
      restrict: 'AE',
      link: function (scope, element, attrs) {
        element.bind('load', function () {
          console.log('image loaded');
        }).bind('error', function () {
          element.attr('src', 'http://www.safexone.com/images/old/default.gif');
        });
      }
    }
  });

＆＃13;

<div ng-app="test" ng-controller="test">
  <h3>Correct image</h3>
  <img ng-src="{{correct_image}}" image-dispatch />
  <h3>Wrong image</h3>
  <img ng-src="{{wrong_image}}" image-dispatch />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

＆＃13;

＆＃13;

＆＃13;