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

Posted 2023-03-13

【中文标题】如果变量 image 为空，则定义默认图像

【英文标题】：Define a default image if the variable image is empty如果变量 image 为空，则定义默认图像

【发布时间】：2017-07-12 15:15:58

【问题描述】：

我的<img>：

<img    src="image" />

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

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

【参考方案1】：

使用逻辑或运算符||

<img    src="image||'assets/img/pic_user.png'" />

【参考方案2】：

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

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

然后在你的模板中：

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

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

【参考方案3】：

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

var a = newValue || 0;

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

<img   src="image || 'assets/img/pic_user.png' " />

【参考方案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