ng-repeat - 检测图像是否存在和处理

Question

我在视图中使用以下方式显示一些图像：

<div class="post" ng-repeat="post in vm.posts">
  <a href="{{post.url}}" target="_blank">
    <img ng-src="/feed/{{post.image}}.jpg" />
  </a>
</div>

但vm.posts.image有时会为空。目前，当值为空时，浏览器中会显示错误图像src的图标，但我只想显示黑色空间。

更新 我已设法使用ng-if（如下所示）使其工作 - 有没有办法在ng-src标记内执行此操作？

<div ng-if="post.image">

</div>

Answer 1

我认为您希望在帖子没有图像详细信息时显示空白区域，如果是这种情况，那么您可以使用ng-if从dom中删除元素（如果不存在）。也可以使用ng / show / ng-hide，但使用它们与ng-if之间存在差异。这取决于你的要求。

<img ng-if="post.image" ng-src="/feed/{{post.image}}.jpg" />

根据更新的问题，条件可以用于ng-src，如下所示。如果post.image为false值，那么ng-src将为空，如下所示

<img  ng-src="{{ post.image?('/feed/'+ post.image +'.jpg'):'' "}}/>