ng-src不适用于带有条件运算符的图像源

Question

我使用条件运算符来设置图像的来源。 图像来自数据库，它将是base64字符串。 无论用户是否设置了他的个人资料照片，我都会从数据库中获得一个布尔值。 如果他设置了一张图片，我将其设置为源另一个本地svg文件。  下面是我的代码片段。

 <img id="profilePic" ng-src="{{ photoSet ? 'data:image/jpeg;base64,userPhoto': 'Images/profile.svg' }}"/>

但两种情况都不起作用。 我在哪里做错了？

Answer 1

您需要使用花括号来确保该值达到ng-src。

您可以使用以下任何一项。

userPhoto应包含两种情况下的base64值

 <img id="profilePic" ng-src="{{photoSet}} ? 'data:image/jpeg;base64,{{userPhoto}}': 'Images/profile.svg'"/>

OR

<img ng-if="photoSet" id="profilePic" ng-src="data:image/jpeg;base64,{{userPhoto}}"/>
<img ng-if="!photoSet" id="profilePic" ng-src="Images/profile.svg"/>

Answer 2

您需要按以下方式添加路径并检查ng-if中的条件。

<img  ng-if="photoSet" ng-src="1stImagePathHere" />
<img  ng-if="!photoSet" ng-src="2ndImagePathHere" />