Question

我的<img>：

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

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

如何定义未在变量中定义的默认图像：{{image}}？

Answer 1

使用逻辑OR运算符||

<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;

同样适用于Angular。在你的情况下：

<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;
});

来自：Angular directive for a fallback image

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

4 个答案: