Предварительный просмотр Cropper не работает - Как установить высоту изображения?

Question

Я использую Vue Кроппер JS для загрузки аватаров. Если я установил URL для загрузки изображения, предварительный просмотр не работает. Высота и ширина указаны на 0.

<section class="preview-area"><div class="preview" style="width: 0px; overflow: hidden; height: 0px; max-width: 200px; max-height: 200px;"><img src="https://xxx.xxx.svg" alt="image" style="display: block; width: 0px; height: 0px; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; transform: none;"></div></section>

Если URL-адрес пуст, и я загружаю изображение, предварительный просмотр работает хорошо.

Здесь код:

<template>
    <div>
        <input
            ref="input"
            type="file"
            name="image"
            accept="image/*"
            @change="setImage"
        />
        <div class="row mt-3">
            <div class="col-lg-6">
                <div class="" id="imageEditContainer">
                    <div class="card-header">
                        <strong>Bild bearbeiten</strong>
                    </div>
                    <div class="card-body">
                        <div class="img-cropper" id="cropper">
                            <vue-cropper
                                ref="cropper"
                                :src="imgSrc"
                                preview=".preview"
                                :minContainerHeight="300"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="">
                    <div class="card-header">
                        <strong>Vorschau</strong>
                    </div>
                    <div class="card-body" id="preview">
                        <div class="content">

                            <section class="preview-area">
                                <div class="preview"/>

                            </section>
                        </div>
                    </div>

                </div>
            </div>
        </div>



        <div class="col-lg-12">
            <div class="">
                <div class="card-header">
                    <button class="btn btn-outline-info" @click.prevent="showFileChooser">Bild Hochladen</button>
                    <button class="btn btn-outline-info" @click.prevent="reset">Zurücksetzen</button>
                    <button class="btn btn-outline-primary" @click.prevent="save">Speichern</button>
                    <span class="card-header-actions">
                            <button class="btn btn-outline-primary" @click.prevent="showMore = !showMore">Mehr</button>
                        </span>
                </div>
                <div class="card-body" v-if="showMore">
                    <a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="zoom(0.2)"> Zoom In </a>
                    <a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="zoom(-0.2)"> Zoom Out</a>
                    <a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="move(-10, 0)">Move Left</a>
                    <a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="move(10, 0)">Move Right</a>
                    <a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="move(0, -10)">Move Up</a>
                    <a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="move(0, 10)">Move Down</a>
                    <a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="rotate(90)">Rotate +90deg</a>
                    <a href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="rotate(-90)">Rotate -90deg</a>
                    <a ref="flipX" href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="flipX">Flip X</a>
                    <a ref="flipY" href="#" class="btn btn-outline-info mb-2" role="button" @click.prevent="flipY">Flip Y</a>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import VueCropper from 'vue-cropperjs';
    import 'cropperjs/dist/cropper.css';

    export default {
        components: {
            VueCropper,
        },
        props: [
            'imgSource'
        ],
        data() {
            return {
                imgSrc: '/assets/brand/xxxsvg',
                cropImg: '',
                data: null,
                showMore: false
            };
        },
        mounted() {

            this.$nextTick(() => {


            });
        },
        methods: {
            cropImage() {
// get image data for post processing, e.g. upload or setting image src
                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
            },
            flipX() {
                const dom = this.$refs.flipX;
                let scale = dom.getAttribute('data-scale');
                scale = scale ? -scale : -1;
                this.$refs.cropper.scaleX(scale);
                dom.setAttribute('data-scale', scale);
            },
            flipY() {
                const dom = this.$refs.flipY;
                let scale = dom.getAttribute('data-scale');
                scale = scale ? -scale : -1;
                this.$refs.cropper.scaleY(scale);
                dom.setAttribute('data-scale', scale);
            },
            getCropBoxData() {
                this.data = JSON.stringify(this.$refs.cropper.getCropBoxData(), null, 4);
            },
            getData() {
                this.data = JSON.stringify(this.$refs.cropper.getData(), null, 4);
            },
            move(offsetX, offsetY) {
                this.$refs.cropper.move(offsetX, offsetY);
            },
            reset() {
                this.$refs.cropper.reset();
            },
            rotate(deg) {
                this.$refs.cropper.rotate(deg);
            },
            setCropBoxData() {
                if (!this.data) return;
                this.$refs.cropper.setCropBoxData(JSON.parse(this.data));
            },
            setData() {
                if (!this.data) return;
                this.$refs.cropper.setData(JSON.parse(this.data));
            },
            setImage(e) {
                const file = e.target.files[0];
                if (file.type.indexOf('image/') === -1) {
                    alert('Please select an image file');
                    return;
                }
                if (typeof FileReader === 'function') {
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        this.imgSrc = event.target.result;
// rebuild cropperjs with the updated source
                        this.$refs.cropper.replace(event.target.result);
                    };
                    reader.readAsDataURL(file);
                } else {
                    alert('Sorry, FileReader API not supported');
                }
            },
            showFileChooser() {
                this.$refs.input.click();

            },
            zoom(percent) {
                this.$refs.cropper.relativeZoom(percent);
            },
            save() {
                this.cropImage()
                if(this.cropImg) {
                    axios({
                        method: 'post',
                        url: '/api/users/2/uploadAvatar',
                        data: {
                            image: this.cropImg,
                        }
                    });
                }
            }
        },
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        width: 1024px;
        margin: 0 auto;
    }

    input[type="file"] {
        display: none;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 5px 0;
    }

    .header h2 {
        margin: 0;
    }

    .header a {
        text-decoration: none;
        color: black;
    }

    .content {
        display: flex;
        justify-content: space-between;
    }


    .cropper-area {
        width: 614px;
        height: 300px;
    }

    .actions {
        margin-top: 1rem;
    }

    .actions a {
        display: inline-block;
        padding: 5px 15px;
        background: #0062CC;
        color: white;
        text-decoration: none;
        border-radius: 3px;
        margin-right: 1rem;
        margin-bottom: 1rem;
    }


    .preview-area {
        width: 300px;
        height: 300px;
    }

    .preview-area p {
        font-size: 1.25rem;
        margin: 0;
        margin-bottom: 1rem;
    }

    .preview-area p:last-of-type {
        margin-top: 1rem;
    }


    .preview {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .crop-placeholder {
        width: 100%;
        height: 200px;
        background: #ccc;
    }

    .cropped-image img {
        max-width: 100%;
    }

    img {
        display: block;

        /* This rule is very important, please don't ignore this */
        max-width: 100%;
    }


</style>

Я пытался изменить css:

    .preview {
        overflow: hidden;
        width: 50px;
        height: 50px;
    }

Кто-нибудь может помочь? В чем проблема, что исходное изображение не работает в режиме предварительного просмотра?