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


#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:


#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:


#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


#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