Study Notes——Related methods of image elements in SVG.js

Image()

1）image()

Creates the expected image:

var image = draw.image('/path/to/image.jpg')

If you want to execute a callback after the image is loaded, you can pass a function as an additional parameter:

var image = draw.image('/path/to/image.jpg', function (event) {
    
    
  // 图片加载
  // 这是底层img元素的加载事件
  // 您可以访问图像的自然宽度和自然高度
  // event.target.naturalWidth, event.target.naturalHeight
})

2）image.load()

Another image can be loaded using the load() method:

image.load('/path/to/another/image.jpg', callback)

3) image event

You can bind to load and error events when the image is loaded.
This can be done as always with:

image.on('load', function (e) {
    
    
  // this is the loading event for the svg image
})

Video explanation

Video explanation