我照着官网实例写了一遍 没有正确加载出来裁剪框

[Ya-hui]

<template>
  <el-dialog title="智能搜图" :show-close="false" draggable>
    <div>
      <div class="afd-cropper-container afd-w-100% afd-h-350"></div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import Cropper from 'cropperjs';
import './style.scss';

onMounted(() => {
  const image = new Image();
  image.src = 'https://fengyuanchen.github.io/cropperjs/v2/picture.jpg';
  nextTick(() => {
    const cropper = new Cropper(image, {
      container: '.afd-cropper-container',
    });
    console.log(cropper);
  });
});
</script>

我不知道这是什么原因， 困扰了我好几个小时了。感觉像是样式没有加载？