How to load image in cropper via input?

Question

JavaScript

Hello everyone, I'm trying to make a component with the cropperjs
library, if I pass a link to the image through props, then everything works, but I need to load it when I select it through input, tell me
why it doesn't work? The picture appears but without the cropper.

<!-- Загрузка картинки в админке пользователя -->
<template>
<div class="card-body">
    <div class="form-group">
        <label>Загрузите свою картинку</label>
        <input type="file" @change="selectFile">
    </div>
    <div class="row">
        <div class="col-md-12">
            <img :src="src" ref="image">
        </div>
    </div>
</div>
</template>


<script>
import Cropper from 'cropperjs';
export default {
    props: {
        ssrc: String
    },
    data() {
        return {
            src: '',
            image: {},
            cropper: {},
            destination: {}
        }
    },
    mounted() {},
    methods: {
        selectFile(event) {
            let file = (event.target.files || event.dataTransfer.files)[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = (event) => { this.src = event.target.result };
                reader.readAsDataURL(file);
            }
            this.image = this.$refs.image;

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

            console.log(this.cropper)
        }
    }
}
</script>

Answer 1

mounted() {
  this.cropper = new Cropper(this.$refs.image, {
    zoomable: false,
    scalable: false,
    aspectRatio: 1,
  });
},
methods: {
  selectFile(e) {
    const file = (e.target.files || e.dataTransfer.files)[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = e => this.cropper.replace(e.target.result);
      reader.readAsDataURL(file);
    }
  },
},