イメージがサーバからロードされているときにプレースホルダイメージをロードするにはどうすればいいですか？

ユーザがサーバからアップロードするイメージをロードするAngular 4/Ionic 3を持つアプリケーションを構築しています。私は現在、以下のコードを使用していますが、動作していません。イメージがサーバからロードされているときにプレースホルダイメージをロードするにはどうすればいいですか？

<img src="{{user.image}} || assets/images/profileimage.png" />

私は何を間違っているのか分かりません。メイン画像がサーバーからロードされるまでプレースホルダー画像が表示されると思いました。代わりに、メイン画像が読み込まれるまでまだ空白になっています。私が使用しなければならないAngularに固有の何かがありますか？

2017-06-16 Darrell

それは私が知っている角度 – Duannx

いけないhttps://ionicframework.com/docs/api/components/img/Img/確認しますか、イオン性である。しかし、私はあなたのimgのsrcが間違っていると思うそれはこのようなものでなければならない – karthick

あなたは相対パスを設定する必要があります。 './asstes/images/profileimage.png" ' –

isImgLoaded:bool = false;

<img *ngIf="!isImgLoaded" src="assets/images/profileimage.png" > 
<img [hidden]="!isImgLoaded" [src]="user.image" (load)="isImgLoaded = true" >

2017-06-16 06:38:20

最初の 'img'または単に' src'の文字列リテラルパスのための一重引用符が必要だと思います。 –

ヒントのための@surajありがとう - '[]を削除して修正しました。 ' –

-1

この遅延ロードプラグインを使用する方がよい。それは素晴らしい作品。..

インストール：app.module.tsでnpm install ng2-lazyload-image --save

インポート遅延ロード：import { LazyLoadImageModule } from 'ng2-lazyload-image';

imports: [ BrowserModule, LazyLoadImageModule ],

をウルのhtmlでこれとウルのimgタグを置き換える： <img [defaultImage]="defaultImage" [lazyLoad]="image" [offset]="offset">

このコンポーネントを作成するには：

defaultImage = 'https://www.placecage.com/1000/1000'; 
image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg'; 
offset = 100;

01あなたがこの中に任意の助けが必要な場合は詳細情報について

は私が..このことができます

を参照してください。..

2017-06-16 05:05:51

おかげで動作します相対パスコメントが私の答え –

@Roopendraを編集し..I @Roopendraあなたを見たuが、この答えは今便利であると言うことができます;） –

うん – Roopendra

あなたはここに文字列リテラルとして相対パスを提供する必要があります。

<img src="{{user.image}} || ./assets/images/profileimage.png" />

か試してみてください。

<img [src]="user.image || './assets/images/profileimage.png'" />

2017-06-16 06:35:53

答えて