Change avatar dynamically

[1Map]

I have a vue 3 app.

I have a data value (Base64 string) that changes dynamically in code.

data:image/png;base64,xxxx

How can I set the avatar property to the base64 string (and nor a url) before the Avatar Editor opens?

Seems that avatar property is only getting set once the component setup.

I have tried:

<VueAvatarUpload
      v-show="showAvatarSelector"
      :avatar="this.selectedAvatar"
      lang="en"
      width="200"
      height="200"
      selectSize="200"
      previewSize="200"
/>

But even if I change this.selectedAvatar to the new Base64 string, it still does not show

[derlans]

In the previous code, props.avatar was not responsive, and in the latest version, I fixed this issue

[1Map]

Thanks working 100%. How can I reset the image position and zoom when I re-open my component? Like avatar property, is width/height/top/left also dynamic properties, in other words watches?

[derlans]

Currently, resetting these properties outside of the component is not supported. Width/height/top/left are not dynamic properties. I recommend adding a key to the component and updating the key when these properties need to be recharged. This may result in some performance loss, but there is currently no other way to do so

[1Map]

Thanks, I am not so clued up with vue. Will apreciate it if you can maybe show me a small sample of how this can be done.

[derlans]

codesandbox

you can see the demo preview/APP.vue

---script

const key = ref(0)

---template

<AvatarUpload :key="key" v-bind="Props" @custom-request="handelUpload" @close="handelClose" @error="handelErr" @success="handelSuccess" />
<div style="display: flex;justify-content: center;">
    <NButton type="success" @click="key++">
          update Props
    </NButton>
</div>

[1Map]

Thanks, 100% working now. You can close this ticket.