How to set the default image on a img src while whole response is not received in ionic3?

Ionic Framework ionic-v3
1

Hello to all,
tell me anyone whats the wrong in my code, i have to set default image while response not received i am using placeholder but not working?

<span  *ngIf="userProduct.ImageCollection">
      <img class="imageSetInCard"  src="{{userProduct.ImageCollection[0].url}}" placeholder='assets/imgs/kids-party.jpg'>
</span>
2

Hello,
img has placeholder property?

Bind a variable to src that holds, for example your kids-drug-party.jpg, and if the other Image from collection is available set it to your variable.

Best regards, anna-liebt

3

tell m how to do this?

4

READ THE DOC:
https://angular.io/guide/template-syntax#property-binding--property-

5

I check this doc and now check my below binding this is correct or not?
<img bind-src=“userProduct.ImageCollection[0].url != null ? userProduct.ImageCollection[0].url :‘assets/imgs/kids-party.jpg’”;

6

<img [src]="myTsVariable" />

Here I’m binding the src DOM prop to the “myTsVariable” in the ts file.
Did you get that now? :wink:

1 Like
7

hello,
additional via string interpolation

<img src="{{myTsVariable}}">

Best regards, anna-liebt

8

Didn’t know it’s binded this way too!
Isn’t it just for once?

9

sir i tried but not working tell m whats i m wrong

	[src]="userProduct.ImageCollection[0].url != null ? userProduct.ImageCollection[0].url : myImgUrl">

Contrustor :
public myImgUrl : string = “assets/imgs/google.gif”

10

So…
[src]="myImgUrl"

11

userProduct.ImageCollection is get from the firestore and myImgUrl is our default image URL and if resposne is not received from Fb we have to show default image?

12

Or not show at all :slight_smile:
<img *ngIf="myImgUrl" [source]="myImgUrl" /><
Initiate myImageUrl to null if you don"t want default image, else, set a valid URL.

13

Maybe you can use this directive:

1 Like
14

ok sir i will try this

15

Hello,

why so much effort?

Declare a variable in ts with your path to placeholder image.

myTsVariable:string ='mypath/myimage.png';

And bind it in html like

<img [src]="myTsVariable" />

If your image path change from whatever

this.myTsVariable ='mynewpath/mynewimage.png';

The rest is angular doing for you. Imho keep html dumb.

@izio38 I prefer property binding, because sometimes it is needed.

Best regards, anna-liebt

1 Like
16

sir how to mange myTsVariable as well as dyncamically image that is received from the FB?

17

Hello,

my english is not the best., so sorry for that, if I understand something wrong.

I guess you get a path/url string from whatever. If you bind in html a variable/methode to .ts, then angular is doing the rest for you.

[anyproperty]=‘anyvariable’ updates html, when anyvariable change.
(click)=‘anyMethode()’ is execute if you clickin html on it.
[(ngModel)]=“userName” is used for inputs and is both way.

Look here https://angular.io/guide/cheatsheet

Best regards, anna-liebt

18

sir you are not understand my question?

19

Sorry, maybe someone else understand it.

Best regards, anna.liebt

20

app.component.ts
export class AppComponent {
public mainImage = ‘https://angular.io/assets/images/logos/angular/logo-nav@2x.png’;
public showedImage = ‘https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif’;

ngOnInit() {
let img = new Image();

setTimeout( ()=> { // only for delay
  img.src = this.mainImage;
}, 5000 )

// can use like this
// img.addEventListener('load', l => {
//     this.showedImage = this.mainImage;
//     //remove listener after load
// });


// or use like this
img.onload = () => {
  this.showedImage = this.mainImage;

}

}
}

app.component.html
<img [src]=showedImage width=“300px”>

Run online here: https://stackblitz.com/edit/angular-k7mlz8

1 Like