Cropper.js image is too small in Vue 3 component

I'm new to Vue and Cropper.js, and I'm working on a project where I let users upload and crop their avatar.

The problem is that the image inside the cropper appears extremely small (sometimes like 10x10 pixels), even though I tried to style it via CSS. No matter what I do, the cropper is tiny and unusable.

I’ve tried different configurations (Setting fixed width and height on both .image-container and the tag), and even on a clean test project the problem remains.

Here’s my base Vue component:

<template>
    <div>
        <div class="image-container">
            <img ref="image" :src="src"/>
        </div>
    </div>
</template>

<script>
    import Cropper from 'cropperjs'
    import '../assets/cropper.css'

    export default {
        name: 'ImageCropper',
        props: {
            src: String
        },

        data() {
            return {
                cropper: {},
                destination: {},
                image: {}
            } 
        },

        mounted() {
            this.image = this.$refs.image;
            this.cropper = new Cropper(this.image, {
                zoomable: false,
                scalable: false,
                aspectRatio: 1
            });
        }
    }

</script>

<style lang="scss" scoped>
    .image-container {
        width: 800px;
        height: 800px;
        position: relative;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }
</style>

Here's what it looks like: sample

The default minimum width and height of the CropperCanvas element is 200px and 100px which is what your sample image looks to be. You must use CSS to change these dimensions.

The canvas element is nested within your .image-container div, so to change the height you must use Vue's deep selector like this:

.image-container {
  width: 800px;
  height: 800px;
  position: relative;

  :deep(cropper-canvas) {
    height: 100%;
  }
}