[英]loadImageFailed() trigger error when using ngx-image-cropper with ngx-bootstrap-modal
Notice some intermittent load failure when opening up the ngx-bootstrap-modal to load the ngx-image-cropper.在打开 ngx-bootstrap-modal 以加载 ngx-image-cropper 时,请注意一些间歇性加载失败。 Did some try and error, I've noticed that as long as I open the modal before loadImageFailed() triggered.
做了一些尝试和错误,我注意到只要我在 loadImageFailed() 触发之前打开模式。 The cropper will load and everything seems to work fine.
裁剪器将加载,一切似乎都工作正常。 Is it got to do with not rendering to the DOM?
是否与不渲染到 DOM 有关?
I can't find the cause of it though, or am I missing something?我找不到它的原因,还是我错过了什么?
Hope to get some light on this.希望能对此有所了解。
Thanks in advance.提前致谢。
Here is how the modal looks like:这是模态的样子:
<!-- EDIT MODAL -->
<article bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="dialog-sizes-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form (ngSubmit)="instructorService.updateCover(instructor.id)">
<section class="modal-header">
<h4 id="dialog-sizes-name1" class="modal-title pull-left">EDIT BANNER</h4>
<button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</section>
<section class="modal-body">
<cropper></cropper>
</section>
<section class="modal-footer d-flex bd-highlight">
<div class="mr-auto p-2 bd-highlight">
<input class="overflow-x" type="file" (change)="onSelectFile($event)" hidden #browser>
<button type="button" class="btn btn-pri" (click)="browser.click()"><b>BROWSE</b></button>
</div>
<div class="p-2 bd-highlight">
<button type="button" class="btn btn-sec btn-block"
(click)="lgModal.hide()"><b>CANCEL</b></button>
</div>
<div class="p-2 bd-highlight">
<button type="submit" class="btn btn-dark btn-block px-4"
(click)="lgModal.hide()"><b>SAVE</b></button>
</div>
</section>
</form>
</div>
</div>
</article>
Manage to solve it by hooking it up to the lazy-loading component method.通过将其连接到延迟加载组件方法来设法解决它。 But I think that this might just be a workaround.
但我认为这可能只是一种解决方法。 But hey, While waiting for someone else to shine some light, this might just be of help to any of you to pass by.
但是,嘿,在等待其他人发光时,这可能对你们中的任何一个路过都有帮助。
For how to lazy-load a component.关于如何延迟加载组件。 I found this great article by Netanel Basal.
我发现了 Netanel Basal 的这篇很棒的文章。
https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a
Cheers~干杯~
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.