I want to be able to edit the image preview list by clicking on it.

[jungsikjeong]

I am doing the following case:

1. Upload multiple images.

2. Select the image you want to edit among them.

3. 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?

[Norserium]

@jungsikjeong, could you provide more code or reproduce this issue in the codesandbox?

[Norserium]

@jungsikjeong, any news?

[jungsikjeong]

@Norserium YES. thank you