search

advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
933 stars 130 forks source link

Issue with image load when the component isn't displayed #151

Closed DraftProducts closed 2 years ago

DraftProducts commented 2 years ago

If the src prop of the cropper is changed when the cropper is not displayed, the cropper can't display it and it takes the look of the cropper when no image is provided:

image

This can happen when the cropper is accessible from a modal and the cropped image can be changed from outside with a Save/Reset changes buttons.

Here a sandbox with three buttons to understand and test it. https://codesandbox.io/s/bug-of-src-0rndk?file=/src/App.vue

Norserium commented 2 years ago

@DraftProducts, when the cropper wrapper is hidden (display:none) its width and its height are equal to 0, so at start the cropper has 0 height alike. The cropper doesn't know about the changes of its wrapper at all, hence when you open a modal window the cropper size is not recalculated and it's still equal 0.

For such situations there is refresh method. It forces the cropper recalculate its height. Look at the example (it's possible, that nextTick is not needed in your real-case).

Norserium commented 2 years ago

Similar issue: #55

DraftProducts commented 2 years ago

Thank you for such a quick response! It's okay, I'll try this. Have a nice day!

Norserium commented 2 years ago

@DraftProducts, you are welcome!