Vue-konva : Unable to fill rectangles with an image

Question

I draw correctly severals rectangles with the library vue-konva (my project is made with Vue.js 2).

However I want to fill these drawn rectangles with images. The vue-konva doc say to use the property fillPatternImage but it doesn't work

Here my code

template :

<div id="scene">
    <v-stage :config="configKonva">
        <v-layer>
            <div v-for="(coordonate, index) in coordonatesList" v-bind:key="index">
                <v-rect :config="getConfigRect(coordonate)"></v-rect>
            </div>
        </v-layer>
    </v-stage>
</div>

script:

methods: {
    getConfigRect: function(element) {
        return {
            x: element.x,
            y: element.y - (RECT_HEIGHT / 2),
            width: 20,
            height: 20,
            fill: element.color,
            fillPatternImage: '../../assets/cell.png',
        }
    }
}

The path of the png is correct. If put a img tag in my template with the above path in src, I can see my image.

You can test a sample of code at this url : https://codesandbox.io/s/6x1r9jxklz

Why any image are not displayed in this case ?

Answer 1

according to the vue-konva documentation, your code must be within the data, no in methods. Example:

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
      }
    };
  }
};