Rendering an image in Konva.js with Vue.js works fine with desktop browsers but not with IOS Chrome or Safari - vuejs2

Question

I have a particular issue and I'm hoping someone can point out what I'm not doing correctly. My original code is posted here: Solved:Vue.js Konva library to display a simple image, what am I missing?
.
What's happening is I'm displaying a single image with Konva successfully (see code), however when I try to view the same page using mobile IOS Chrome or Safari, nothing displays. It works fine in desktop OSX Chrome and Safari, but not on the mobile versions. I just get a blank area where normally I would see the image on my OSX browsers. I'm sure there may be a step I am missing. Furthermore another interesting issue on the OSX browsers is that when I bring up the page to display the image initially it is blank until I do a page refresh, then it displays. Now maybe this is Vue.js and not Konva. However I thought I would point that out if anyone has further insights. Any suggestions would be greatly appreciated.
[Updated: Got it working] - Ok, I've done some testing and this is what I found out that seemed to solve the issue. After research, the biggest issue related to this is somewhere during the lifecycle the image is not attached to the dom before it is rendered. Even though I am doing image.src during the mounted stage which is the same as ".ready()" from what I understand. I even tried loading the image using the updated stage in Vue. Same issue. What worked was I used v-if to hide the Konva stage, then attached the source during mounted then ran v-if=true post image attachment to display the Konva stage and Bingo! everything works. It even works on the IOS browsers.
<template>
<div id="app">
<h1>Display Image via Konva</h1>
<div v-if=ShowStage>
<v-stage ref="stage" :config="configKonva">
<v-layer ref="layer">
<v-image :config="configImg"></v-image>
</v-layer>
</v-stage>
</div>
</div>
<script>
import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
export default {
data() {
return {
ShowStage: false,
testImg: new Image(),
configKonva: {
width: 500,
height: 500
}
},
computed: {
configImg: function() {
return {
x: 20,
y: 20,
image: this.testImg,
width: 200,
height: 200,
}
}
},
mounted() {
this.testImg.src = "https://konvajs.github.io/assets/lion.png"
this.ShowStage = true
}
}
</script>

Answer 1

I am experiencing the same issue right now.
Locally it seems to work on IPhone with Safari but deployed to the Server it is not working anymore.
However did you try something like this?
const image = new Image()
image.src = url
image.crossOrigin = 'anonymous'
image.onload = () => {
new Konva.Image({image: image})
// Further code ...
}
The crossOrigin set to anonymous helped me at least partly.