vue-cropperjs is not refreshing when adding new photo-CodePudding

I'm using this input for adding new image

<input type="file" id="profile_photo_add" ref="profile_photo_add" @change="createProfilePhotoPreviewInAdd"/>

<vue-cropper 
                v-if="urlProfilePreviewAdd"
                ref="cropperAdd" 
                :src="urlProfilePreviewAdd"
                alt="Source Image" 
                :aspectRatio="16/9"
                :initialAspectRatio="16/9" 
                :autoCropArea="1"
                :zoomable="false"/>

And this method for creating object url for cropper

createProfilePhotoPreviewInAdd(e)
    {
      this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
      console.log(this.urlProfilePreviewAdd)
      console.log(this.$refs.cropperAdd)
    }

First time when i upload a image, the cropper shows that image, if i'm trying to upload other image, the cropper doesn't refresh. If i console.log the cropper ref and the urlProfilePreviewAdd i see that urlProfilePreviewAdd is changing but the cropper ref target stays the same as first time. How to update in real time with the input, the cropper too? SS for console.logs

Take a look to ss for console.logs too here.

CodePudding user response：

You must call the replace function on the cropper instance as noted in the documentation

Replace the image's src and rebuild the cropper.

setImage(e) {
  this.urlProfilePreviewAdd = URL.createObjectURL(e.target.files[0]);
  this.$refs.cropper.replace(this.urlProfilePreviewAdd);
},