首页 文章

Angular 2 ng2-img-cropper 没有显示组件

提问于
浏览
1

我想裁剪 3 张图片,然后使用 Angular 2 上传它们。我整合了 Angular 2 Image Cropper“ng2-img-cropper”,但我没有让它工作。

当我运行应用程序并进入实现裁剪器的页面时,我只看到一个小图像方块,当我单击或拖动它时没有任何反应,并且控制台中没有错误。 图:空图像方块

我正在使用“ng2-img-cropper@4.6”。

这就是我继续实施的方式。我提到了这个 Github 链接https://github.com/cstefanache/angular2-img-cropper我把它添加到了 HTML 中

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

而这就进了全班

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 = {};

}

谢谢。

链接到问题问题

1 回答

  • 2

    基本上,有两个原因导致您的组件未显示第一个组件,或者您未在列表或指令中列出组件,或者您的组件未正确绑定到 img 中的src。否则 angular2 image cropper 对我来说工作正常,请看这里。

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

    也见到这里

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

    如果你还有任何错误,请在附加的 plunker 中重现你的错误。

相关问题