如果变量{{image}}为空，则定义默认图像

Question

我的 <img>：

<img width="90" height="90"  src="{{image}}" />

默认图像文件夹：assets/img/pic_user.png

如何定义一个默认图像，该图像在变量中未定义： {{image}}？

Answer 1

使用逻辑或操作员||

<img width="90" height="90"  src="{{image||'assets/img/pic_user.png'}}" />

Answer 2

您可以将默认图像路由存储在变量中，然后使用三元运算符在image不存在的情况下使用它：

defaultImage: string = "assets/img/pic_user.png";

然后在模板中：

<img width="90" height="90"  [src]="image ? image : defaultImage" />

请注意，我认为我使用的属性绑定而不是插值，我认为它更优雅。

Answer 3

在javascript中设置默认值有一个技巧：

var a = newValue || 0;

也适用于角度。在您的情况下：

<img width="90" height="90" src="{{image || 'assets/img/pic_user.png' }}" />

Answer 4

使用后式映像

<img fallback-src="fallbackimg" ng-src="{{image}}"/>
myApp.directive('fallbackSrc', function () {
  var fallbackSrc = {
    link: function postLink(scope, iElement, iAttrs) {
      iElement.bind('error', function() {
        angular.element(this).attr("src", iAttrs.fallbackSrc);
      });
    }
   }
   return fallbackSrc;
});

来自：后备图像的角指令