我有一个AngularJS 1.0.7应用程序,代码如下:
<img ng-show="selectType != null"
ng-src="//domain/img/boat_types/{{selectType.name}}.jpg"
style="margin-left: 175px; height: 200px; width: 200px"
class="media-object img-circle"/>
由于仅在selectType不为null时显示图像,其他时候我在浏览器控制台中收到此错误。
GET http://domain/img/boat_types/.jpg 403 (Forbidden)
我可以避免这个吗?
答案 0 :(得分:0)
我可以避免这个吗?
是,将ng-show
替换为ng-if
。
<img ng-if="typeof selectType.name!=='undefined'"
ng-src="//domain/img/boat_types/{{selectType.name}}.jpg"
style="margin-left: 175px; height: 200px; width: 200px"
class="media-object img-circle"/>
应该有效。将ng-show
替换为ng-if
,因此如果selectType.name
不存在,指令将无法编译。
使用ng-show
时,指令编译 - 是否满足条件 - 但不显示条件是否满足。这意味着它将尝试获取不存在的图像,因此出现错误消息。
使用ng-if
,如果不满足条件,则不会编译,也不会出错。
编辑:针对较旧版本的angularjs的解决方法,该版本没有ng-if
:
可以设置默认路径,指向现有的低权重图像。
在您的视图中将ng-src="//domain/img/boat_types/{{selectType.name}}.jpg"
替换为ng-src="mysrc"
。
然后在控制器/指令中定义图像的默认路径:
$scope.mysrc=(typeof selectType.name!=='undefined')?"//domain/img/boat_types/"+$scope.selectType.name+".jpg":"path/to/my/low/weight/default/image.jpg";
因此,如果不满足条件,则可以通过使用默认图像路径填充$scope.mysrc
来编译该指令,该路径不会返回错误。
默认图像的路径就是为了防止出现错误信息。将提取默认图像,但从未实际显示。
编辑:对于有ng-switch的angularjs版本,还有另一种解决方法,根据这篇文章:
How to really prevent an element from being put into the DOM with angularjs
在您的情况下,您可以这样使用ng-switch
:
<span ng-switch="typeof selectType.name==='undefined'">
<img ng-switch-when="false" ng-src="//domain/img/boat_types/{{selectType.name}}.jpg"/>
</span>