Missing stencil and duplicate view

[Excel1]

Hello!

Im having trouble to use vue-advanced-cropper in my Quasar Application (based on Vue3). I installed vue-advanced-cropper and used the well documented code snippets as you can see in the following vue component file.

My goal was to implement a cropper with a stencil (for avatar choosing) but i got a gray square and two pictures which i can zoom in and out but not crop anything. I also recorded the behavior in the following video.

https://github.com/advanced-cropper/vue-advanced-cropper/assets/9309456/0c74846a-60d3-4fc6-838b-e837abc25c9a

Also mentioned. I used ref="cropper" which brings me into a loop of refs and break my vue application.

<script setup lang='ts'>
import { useDialogPluginComponent } from 'quasar';
import { reactive, ref } from 'vue';
import { Cropper } from 'vue-advanced-cropper';

const { dialogRef, onDialogHide } = useDialogPluginComponent();
const props = defineProps(['imageUrl']);

const change = (coordinates: any, canvas: any) => {
  console.log(coordinates, canvas)
}

defineEmits([
  ...useDialogPluginComponent.emits
]);

const image = reactive({
  src:
    "https://images.unsplash.com/photo-1619737307100-55b82496fcda?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80",
  type: "image/jpg",
});

const cropper2 = ref();

const file = ref();

</script>

<template>
  <q-dialog ref='dialogRef' @hide='onDialogHide'

            maximized
            persistent>
    <q-card>
      <q-toolbar>
        <q-toolbar-title>{{ $t('createTeam') }}</q-toolbar-title>
        <q-btn flat round dense icon="close" v-close-popup />
      </q-toolbar>
      <q-card-section>
        <cropper ref="cropper2" class="cropper" @change="change" :src="image.src"  :stencil-props="{
        aspectRatio: 9/16
    }"/>
      </q-card-section>
    </q-card>
  </q-dialog>
  <q-card>

  </q-card>
</template>

<style scoped>
.cropper {
  height: 600px;
  width: 600px;
  background: #DDD;
}
</style>

[Norserium]

@Excel1, I don't see the import of the styles:

import 'vue-advanced-cropper/dist/style.css';

[Excel1]

@Norserium you are awesome! Really thank you for the fast reply. I still don't know how I could have missed it...

[Norserium]

@Excel1, it's okay. You are welcome!