vue-advanced-cropper
vue-advanced-cropper copied to clipboard
I want to be able to edit the image preview list by clicking on it.
I am doing the following case:
-
Upload multiple images.
-
Select the image you want to edit among them.
-
When selected, the following code runs. (Load image with :src)
<Cropper ref="cropper" class="cropper" @change="change" :src="image.src" />
But now the problem is Cropper is not loading through :src.
The code for image is like this.
const image = reactive({
src: '',
type: 'image/jpg',
});
When you click an image on the screen, the following code runs.
const onImageChange = (e: any) => {
const allImages = store.getters['imageStore/getImage']; // 변경
const imageIndex = allImages.findIndex(
(value: any) => value.toDataURL === e.target.src
);
testindex.value = 1;
if (imageIndex !== -1) {
image.src = allImages[imageIndex].src;
isShowFile.value = true;
}
};
As a result of taking console.log, image.src changed well, but
<Cropper ref="cropper" class="cropper" @change="change" :src="image.src" />
Why is this :src not updated?