时间戳

首页 > 解决方案 > 无法将带有 vue 的计算机中的图像加载到 konva 层

vue.js - 无法将带有 vue 的计算机中的图像加载到 konva 层

问题描述

我正在尝试使用此vue-konva解决方案将图像放在图层上。解决方案工作正常，从网络加载图像时，如示例中所示，但我无法将其更改为与我在.pngassets

根据我的文件夹结构，源应该是'../assets/image.png'But it doesn't find it, ~/assets/image.pngor or @assets/image.pngor "require('../assets/image.png)".

（我曾经vue-cli启动一个模板项目，并且正在使用调用的本地开发npm run dev人员进行测试。我不确定这是否与路径问题有关，但我以前从未使用过这样的系统，所以它可能还好我所知）

标签： vue.js

解决方案

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

这是一个沙箱

和代码：

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

推荐阅读