*ngIf not working correctly on value null

Having a little bit of difficulty getting this to work correctly and would greatly appreciate some help. Pulling data from Wordpress JSON API into Ionic 3 App using a Wordpress plugin called Better Featured Image, but having a little bit of difficulty when no featured image exists.

This is my code
<ion-avatar item-left *ngIf="item.better_featured_image.media_details.sizes.thumbnail.source_url"> <img *ngIf="item.better_featured_image.media_details.sizes.thumbnail.source_url" src="{{item.better_featured_image.media_details.sizes.thumbnail.source_url}}"> <img *ngIf="!item.better_featured_image.media_details.sizes.thumbnail.source_url" src="assets/default.png"> </ion-avatar>

The problem is that when an item doesn’t have an image the son shows

* better_featured_image: null,

So basically i want it to to use a default image if there is a null value … Unfortunately as it is when no image exists i get

Runtime Error

Cannot read property 'media_details' of null

I can’t work out were i am going wrong … any help would be greatly appreciated.

Try this:

<ion-avatar item-left *ngIf="item.better_featured_image.media_details != null">
    <img src="{{item.better_featured_image.media_details.sizes.thumbnail.source_url}}"> 
</ion-avatar>
<ion-avatar item-left *ngIf="item.better_featured_image.media_details == null">
    <img src="assets/default.png"> 
</ion-avatar>

Thanks for your reply and your efforts … unfortunately i still get the same response.

Ups, i should have done this instead:

<ion-avatar item-left *ngIf="item.better_featured_image != null">
    <img src="{{item.better_featured_image.media_details.sizes.thumbnail.source_url}}"> 
</ion-avatar>
<ion-avatar item-left *ngIf="item.better_featured_image == null">
    <img src="assets/default.png"> 
</ion-avatar>

In this code I’m testing wheter better_featured_image is null or not

That my friend works an absolute treat … Perfect !! Thank you so much !

1 Like

I think a better solution is to do this in the controller. Go through and put “assets/default.png” into the source_url property of each item that doesn’t have one. It will make the template both cleaner and more performant.

Yeh i think i get it … but the content is dynamic and being pulled from a Wordpress site, which constantly gets updated,

That’s something that can and probably should be addressed further upstream (i.e. not in the page). Whatever service is feeding new information from the backend should be in charge of seeding the image URLs with reasonable defaults.

I see what your saying ! So actually if i set a default image in Wordpress instead, then the endpoint won’t be null in the JSON API, so need to query it in Ionic …

Thanks to both of you for your assistance, but yes i don’t know why i didn’t think of that first !

I guess that’s one way of doing it, but not what I meant. Presumably you have some service provider in your app that is in charge of talking to Wordpress and feeding that information to pages that want it (if you don’t, maybe now would be a good time to abstract that logic into one). I would do the default URL seeding logic in there.