0

Below I have an ng-repeat where the inner div gets a background image set after reading a JSON file.

My question is - If post.featured_image.attachment_meta.sizes.medium.url does not exist or is null, what would be the best approach to replace this with another image? Say a default backup image? A solution or tips to what to look for is what I am after as I am relatively new to AngularJS.

Code is below:

<article ng-repeat="post in posts">
   <div style="background-image: url({{ post.featured_image.attachment_meta.sizes.medium.url }})"></div>
</article>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Cecil Theodore
  • 9,549
  • 10
  • 31
  • 37

1 Answers1

3

You can use ng-style:

<article ng-repeat="post in posts">
   <div ng-style="post.featured_image.attachment_meta.sizes.medium.url === null ? {'background-image': 'url(/yourimage.jpg)' } : {'background-image': 'url('+post.featured_image.attachment_meta.sizes.medium.url+')' }"></div>
</article>
michelem
  • 14,430
  • 5
  • 50
  • 66