CropperJS-裁剪器框不出现

Question

我正在使用cropper js，我认为它可以正常工作并且没有错误出现，但是裁切器框没有显示如下所示

来自cropper js网站

代码

@section('styles')
  <link rel="stylesheet" href="{{ asset('css/cropper.min.css') }}" />
@endsection

@section('content')
  <div>
    <img src="{{ asset('images/slide-1.jpg') }}" id="postBanner" style="max-width: 100%;">
  </div>
@endsection

@section('scripts')
  <script src="{{ asset('js/cropper.min.js') }}"></script>
  <script>
    const image = document.getElementById('postBanner');

    const cropper = new Cropper(image, {
      aspectRatio: 2 / 1,
      crop(event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
      }
    });
  </script>
@endsection