Load signature to vue-signature-pad-CodePudding

I am beginner in vue. I have my firs post here. I make my project in Vue 2.

I have this code: https://pastebin.com/Ddaqf6E9

<vue-signature-pad
                          id="signature"
                          width="100%"
                          height="500px"
                          ref="signaturePad"
                          :options="{
                            onBegin: () => {$refs.signaturePad.resizeCanvas()},
                            images: () => { 'https://a.allegroimg.com/s1024/11837d/f04da35e4213a6f817918924c51f/8BitDo-ADAPTER-GRAJ-PADEM-PS4-XBOX-NA-SWITCH-PC-Sposob-podlaczenia-bezprzewodowy'}
                        }"
                        />

This is work fine. When I click on cavas - I can painting.

Now, I need add signature from database to this canvas (after page reload). I can create image in php. For test I try add to canvas this image: https://a.allegroimg.com/s1024/11837d/f04da35e4213a6f817918924c51f/8BitDo-ADAPTER-GRAJ-PADEM-PS4-XBOX-NA-SWITCH-PC-Sposob-podlaczenia-bezprzewodowy

but it's not visible :(

How can I repair it?

CodePudding user response：

Take a look at this demo

...
  async mounted() {  
 
 
 fetch("https://a.allegroimg.com/s1024/11837d/f04da35e4213a6f817918924c51f/8BitDo-ADAPTER-GRAJ-PADEM-PS4-XBOX-NA-SWITCH-PC-Sposob-podlaczenia-bezprzewodowy")
    .then(raw => raw.blob())
    .then(blob => {
      const reader = new FileReader();
      reader.readAsDataURL(blob)
      reader.onloadend = () => {
        this.$refs.signaturePad.fromDataURL(reader.result)
      }
    })
  }
...