我正在构建的应用程序需要我的用户设置4个信息之前,这个图像甚至有机会加载。这个图像是应用程序的中心部分,所以破碎的图像链接使得它看起来像整个东西是borked。我想要另一个图像在404的地方。
有任何想法吗?我想避免为此写一个自定义指令。
我很惊讶,我找不到一个类似的问题,特别是当第一个问题在文档是同一个!
这是一个非常简单的指令,以观察加载图像和替换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属性。