Question

如果我的对象列表（profileList）中有用户，我想显示用户的图片，当没有找到用户时，我想显示default / error为defaultProfile.png（{{item.userProfile}}为null）

我搜索了类似的方法，例如

angularjs: ng-src equivalent for background-image:url(…)

和

我解决这个问题的方法是：

<div ng-repeat="item in profileList">
    <div>
     <img src='assets/img/defaultProfile.png' data-ng-src="http://example.com/{{item.userProfile}}.jpg" onerror="this.src='assets/img/defaultProfile.png'" />
    </div>
<div>

我能够显示错误照片，但我仍然收到错误500，

获取http://example.com/.jpg 500（内部服务器错误）

如何避免获取http://example.com//.jpg？

非常感谢

Answer 1

当ng-src未定义时，您当前的问题userProfile仍在编译并评估为无效的网址。

一个简单的解决方案是使用三元并检查userProfile，然后决定使用url：

 <img ng-src="{{ item.userProfile ? 'http://example.com/' + item.userProfile + '.jpg'}} : 'assets/img/defaultProfile.png'" />

除非item.userProfile可用，否则我们将保证您始终可以获取默认图片。

Answer 2

一种方法是使用ng-if和ng-hide：

<div ng-repeat="item in profileList">
    <div>
     <img ng-if="item.userProfile" 
          data-ng-src="http://example.com/{{item.userProfile}}.jpg" />
     <img ng-hide="item.userProfile" 
          src="assets/img/defaultProfile.png" />
    </div>
<div>

当item.userProfile存在时，显示ng-src并隐藏默认值，反之亦然。

Answer 3

有效。

NG-显示

无论{{item.userProfile}}是否为空，

都会运行。

将其更改为

NG-如果

以下代码正在运行：

<div ng-repeat="item in profileList">
<div>
 <img ng-if="item.userProfile" 
      data-ng-src="http://example.com/{{item.userProfile}}.jpg" />
 <img ng-if="item.userProfile == null" 
      src="assets/img/defaultProfile.png" />
</div>

请注意我的profileList是：

$scope.profileList = {userProfile = null}

非常感谢

如何在ng-repeat

3 个答案: