CropperJS - 不显示裁剪框

Question

I am using cropper js, I think it works and no errors appear, but the cropper box does not appear as shown below

from the cropper js website

code

@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