我开发的应用程序需要我的用户这一形象，甚至有负载的机会之前设置4条信息。 此图片是中心式的应用程序，所以破碎图像链接使它看起来像整个事情是borked。 我想有另一个图像取代其位置在404。
有任何想法吗？ 我想，以避免写这个自定义指令。
我很惊讶，我找不到一个类似的问题，尤其是当文档的第一个问题是同一个！
http://docs.angularjs.org/api/ng.directive:ngSrc
Answer 1:
这是一个非常简单的指令来监视错误加载图像和更换SRC。 （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属性。
Answer 2:
小迟到了，虽然我想出了或多或少在一个系统中同样的问题我建立一个解决方案。
我的想法是，虽然天天看图像img全球标签。
我不希望有辣椒我HTML不必要的指令，如err-src这里显示的。 很多时候，特别是动态画面，你不会知道它是否缺少，直到为时已晚。 在关闭的机会的图像丢失增加额外的指令矫枉过正我看来。
相反，我扩展现有的img标签-这，真的，是什么角度指令是一回事。
所以 - 这是我想出了。
注意 ：这需要完整的jQuery库是存在并不仅仅是JQlite角附带因为我们使用.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将自己的情况下，没有负载掩盖了...
Answer 3:
为了扩大杰森解决搭上加载错误或空源字符串的两种情况下，我们只需要添加一块手表。
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);
}
}
});
Answer 4:
如果图像是404或图像为null空不管有没有需要的指令，你可以简单地使用NG-SRC过滤器这样的:)
<img ng-src="{{ p.image || 'img/no-image.png' }}" />
Answer 5:
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 + '/assets/images/default_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}}" />
Answer 6:
我用这样的事情，但它假定team.logo是有效的。 它迫使默认如果“team.logo”未设置或为空。
<img ng-if="team.logo" ng-src="https://api.example.com/images/{{team.logo}}">
<img ng-hide="team.logo" ng-src="img/default.png">
Answer 7:
你不适合需要的角度，甚至CSS或JS。 如果你愿意，你可以在一个简单的指令包这个答案（链接），以使其更简单，像什么的，但是这是一个非常简单的过程...只是把它包装在一个对象标签...
如何只使用CSS / HTML（无JS）隐藏图像破碎的图标
Answer 8:
有没有你不能在你的代码申报的后备图片具体原因是什么？
据我了解，你有你的图像源两种可能的情况：
- 正确设置的信息<4 =后备图象片断。
- 正确设置的信息== 4 =生成的URL部分。
我想这应该由你的应用程序进行处理 - 如果正确的URL，目前无法确定，而不是通过加载/后退/图像占位符URL。
其理由是，你永远不会有一个“失踪”的形象，因为你已经明确宣布了正确的URL显示在任何时间点。
Answer 9:
我建议你可能喜欢使用角UI utils的“if语句”指令来解决你的问题，因为在发现http://angular-ui.github.io/ 。 我刚才用它做同样的事情。
这是未经测试，但你可以这样做：
控制器代码：
$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属性：
控制器代码：
$scope.showImage = value1 && value2 && value3 && value4;
HTML在检视<img ui-if="showImage" ng-src="images/{{data.value}}.jpg" />
对于一个占位符图像，只需添加另一个类似<img>标签，但前面加上你的ui-if有感叹号（参数! ）标记，要么使ngSrc有路径占位符图像，或只使用一个src标签按正常OL “HTML。
例如。 <img ui-if="!showImage" src="images/placeholder.jpg" />
显然，上述所有代码示例都假设每个值1，值2，值3和值4将等同于null / false时，您的每4条信息是不完整的（因而也是一个布尔值， true完成时，他们）。
PS。 该AngularUI项目最近被打破到子项目，并为文档ui-if似乎缺少当前（在包可能是某处虽然）。 然而，这是非常简单的使用，你可以看到，我已经记录了Github上对角UI项目“问题”指出来给球队太多。
UPDATE：“UI-IF”从AngularUI项目缺少，因为它已经集成到核心AngularJS代码！ 仅作为v1.1.x的，虽然，这是当前被标记为“不稳定”。
Answer 10:
这是我想出了使用原生的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/pokemon/images/c/c9/702Dedenne.png';
};
}
}
});
Answer 11:
提出了自己的解决方案。 它取代了图像的双方如果SRC或ngSrc是空的，如果IMG返回404。
（的@Darren溶液叉）
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);
}
}
}
});
Answer 12:
这将只允许循环两次，以检查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);
}
});
}
}
}
})();
文章来源: if a ngSrc path resolves to a 404, is there a way to fallback to a default?
