如果ngSrc路径解析为404，是否有方法回退到默认值？
如果ngSrc路径解析为404，是否有方法回退到默认值？
提问于 2013-05-01 06:59:13
我正在构建的应用程序要求我的用户在加载此图像之前设置4条信息。这个图像是应用程序的中心部分，所以断开的图像链接让它看起来像是整个事情都被篡改了。我想在404上用另一个图像代替它。
有什么想法吗？我希望避免为此编写自定义指令。
我很惊讶我找不到类似的问题，特别是当文档中的第一个问题是同一个问题的时候！
回答 10
Stack Overflow用户
发布于 2013-06-15 17:52:40
这是一个非常简单的指令，可以观察加载图像和替换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属性。
Stack Overflow用户
发布于 2013-12-08 18:10:35
要扩展Jason解决方案以捕获加载错误或空源字符串的两种情况，我们只需添加一个监视。
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);
}
}
});Stack Overflow用户
发布于 2015-08-14 16:36:04
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}}" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16310298
复制相关文章
相似问题