CODEWITHSUNDEEP
angularjs
tommyd456
tommyd456

Reputation: 10673

ng-repeat - detecting if image exists and handling

I am displaying some images in my view using:

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

but the vm.posts.image will be empty on occasions. At the moment the icon for an incorrect image src is displaying in the browser when the value is empty but I would just prefer to show a black space.

Update: I've managed to make it work using ng-if (shown below) - is there a way to do this within the ng-src tag?

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

</div>

Upvotes: 0

Views: 510

Answers (1)

Shushanth Pallegar
Shushanth Pallegar

Reputation: 2862

I think you want to show the blank space when the posts doesn't have image details, if this is the case then u can use ng-if which removes the element from the dom if its not present . ng/show/ng-hide could also be used but there is difference between using them vs ng-if . it depends on your requirement.

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

As per the updated question , condition can be use for ng-src as below. if the post.image is false value then ng-src would be empty as below

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

Upvotes: 1

Related Questions