Vuejs2 使用Vue.js在Konva.js中渲染图像可以在桌面浏览器中正常工作，但在IOS Chrome或Safari中则不行

我有一个特别的问题，我希望有人能指出我做得不对。我的原始代码发布在这里：

现在的情况是，我正在使用Konva成功地显示一张图像（请参见代码），但是，当我尝试使用移动IOS Chrome或Safari查看同一页面时，没有显示任何内容。它在桌面OSX Chrome和Safari上运行良好，但在移动版本上不起作用。我只是得到一个空白区域，通常我会在OSX浏览器上看到图像。我相信我可能错过了一步。此外，OSX浏览器上另一个有趣的问题是，当我打开页面以显示图像时，最初它是空白的，直到我刷新页面，然后它才显示出来。现在也许这是Vue.js而不是Konva。不过，我想我会指出，如果有人有进一步的见解。如有任何建议，将不胜感激

[更新：开始工作]-好的，我做了一些测试，这就是我发现的似乎解决了问题的方法。经过研究，与此相关的最大问题是在生命周期中的某个地方，图像在渲染之前没有附加到dom。即使我在挂载阶段执行image.src，据我所知，这与“.ready（）”相同。我甚至尝试使用Vue中更新的stage加载图像。同样的问题。工作原理是我使用v-if隐藏Konva stage，然后在安装过程中附加源，然后运行v-if=true post image attachment来显示Konva stage和Bingo！一切正常。它甚至可以在IOS浏览器上运行

<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>

通过Konva显示图像

从“Vue”导入Vue；
从“vue konva”导入VueKonva
Vue.use（VueKonva）
导出默认值{
数据（）{
返回{
展示阶段：假，
testImg:新图像（），
configKonva：{
宽度：500，
身高：500
}
},
计算：{
configImg:function（）{
返回{
x:20，
y:20，
图片：this.testImg，
宽度：200，
身高：200，
}
}
},
安装的（）{
this.testImg.src=”https://konvajs.github.io/assets/lion.png"
this.showtage=true
}
}   

我现在也遇到了同样的问题

在本地，它似乎可以在IPhone和Safari上工作，但部署到服务器上后就不再工作了

你是怎么做的

const image=new image（）
image.src=url
image.crossOrigin='anonymous'
image.onload=（）=>{
新建Konva.Image（{Image:Image}）
//进一步代码。。。
}

---

crossOrigin

设置为anonymous至少在一定程度上帮助了我。

btw-我使用osx Chrome在devtools控制台上没有发现任何错误。当然，没有办法检查ios Chrome。

<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>