角度2 ng2-img-cropperが成分を表示しない

Question

3枚の画像を切り取り、角2を使用して切り取ってアップロードします。 Angular 2 Image Cropper "ng2-img-cropper"を統合しましたが、 。

私は、アプリケーションを実行し、クロッパーは、私が唯一、私はそれをクリックするかドラッグすると、小さな画像広場と何が起こると、コンソールにエラーがない参照実装されているページを行きます。 Figure : Empty image square

"ng2-img-cropper@4.6"を使用しています。

これは私が実装に進ん方法です。 私は

import {ImageCropperComponent, CropperSettings} from 'ng2-img-cropper'; 

data: any; cropperSettings: CropperSettings; 

constructor() { 

    this.cropperSettings = new CropperSettings(); 
    this.cropperSettings.width = 100; 
    this.cropperSettings.height = 100; 
    this.cropperSettings.croppedWidth =100; 
    this.cropperSettings.croppedHeight = 100; 
    this.cropperSettings.canvasWidth = 400; 
    this.cropperSettings.canvasHeight = 300; 

    this.data = {}; 

} 

ありがとうクラスにHTML

<div> 
    <img-cropper [image]="data" [settings]="cropperSettings"></img-cropper><br> 
    <img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight"> 
</div> 

そして、これにこれを追加このGitHubのリンクhttps://github.com/cstefanache/angular2-img-cropper に言及しました。問題へ

リンクIssue

Answer 1

基本的にはあなたのコンポーネントは、あなたのリストまたはディレクティブで コンポーネントをリストまたはいずれかのあなたの中に適切にsrcの結合されていないされていないいずれかの最初のものを示すされていないことにより、2つの理由がありますimg。私はここを参照してくださいするためにそれ以外の場合はangular2画像クロッパーは 正常に動作しています。

https://embed.plnkr.co/V91mKCNkBQZB5QO2MUP4/

まだあなたが何らかのエラーが親切に添付plunkerであなたのエラーを再現している場合

https://stackoverflow.com/a/39096831/5043867

もここを参照してください。