Question

我正在尝试使用this解决方案将图像放在vue-konva图层上。从示例中加载图像时，解决方案可以正常工作，但我无法将其更改为使用png中的assets。

根据我的文件夹结构，来源应为'../assets/image.png'但它找不到它，也不会~/assets/image.png或@assets/image.png或"require('../assets/image.png)"。

（我使用vue-cli启动一个模板项目，并使用npm run dev调用的本地dev thingy来测试。我不确定这是否必须对路径问题做任何事情，但我从来没有使用过这样的系统所以它可能就像我所知道的那样）

Answer 1

（致谢：解决方案是不和谐的Vue Land频道上的matt_rothenberg＃3118）。

以下是it

的沙箱

代码：

<template>
  <div>
    <v-stage ref="stage" :config="configKonva">
      <v-layer ref="layer">
        <v-image :config="configBackground"></v-image>
      </v-layer>
    </v-stage>
  </div>
</template>

<script>
const image = require("../assets/logo.png");

export default {
  name: "HelloWorld",
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configBackground: {
        x: 20,
        y: 20,
        image: new Image(),
        width: 200,
        height: 200
      }
    };
  },
  mounted() {
    this.configBackground.image.src = image;
  }
};
</script>

configBackground已移至data而非计算，图片通过require加载。

无法将具有vue的计算机中的图像加载到konva层

1 个答案: