Konvajs How to change image src dynamically

Question

I created a Konva image like this

var imageObj = new Image();
imageObj.onload = function() {
  var image = new Konva.Image({
    x: 200,
    y: 50,
    image: imageObj,
    width: 100,
    height: 100
  });
};
imageObj.src = '/path/to/image.jpg'

Now I need to know how to update the image src/url of created Konva.Image Object.

You can find the docs here: https://konvajs.github.io/api/Konva.Image.html

Answer 1

You can just replace image property of Konva.Image. Or update src of native image:

var card = new Konva.Image({
    x: 200,
    y: 50,
    width: 100,
    height: 100
});

var imageObj = new Image();
imageObj.onload = function() {
  card.image(imageObj);
};
imageObj.src = '/path/to/image.jpg';

// later

var imageObj2 = new Image();
imageObj2.onload = function() {
  card.image(imageObj2);
};
imageObj2.src = '/path/to/image.jpg';

Or

var imageObj = new Image();
var card = new Konva.Image({
    x: 200,
    y: 50,
    width: 100,
    height: 100,
    image: imageObj
});


imageObj.onload = function() {
  card.getLayer().draw();
};
imageObj.src = '/path/to/image.jpg';

// later
imageObj2.src = '/path/to/image.jpg'; // it should trigger onload