The MarkupsCore extension only supports SVG as custom images - see Stamp markup using SVG file
If you want to use other image types (PNG, JPG, etc) then there are some converters that can be used to turn them into SVG.
Some converters fully convert the original image into <path> and other native SVG features and that should work fine as markups.
Others will simply include a reference to the image either through <image> or inside a <foreignObject> in which case you'll have to make sure the result is up-to-date.
E.g. I used https://pixelied.com/convert/jpg-converter/jpg-to-svg to generate my SVG and it came up with this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2048" height="347" xml:space="preserve" version="1.1" viewBox="0 0 2048 347">
<image width="2048" height="347" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//...FFFABRRRQAUUUUAf/Z"/>
</svg>Inside the webpage the SVG file looks OK, but when trying to use markupExt.renderToCanvas() it will fail for that SVG file here: the img.onload will not be triggered.
After looking at the SVG documentation I saw that my image had a few deprecated attributes - the main culprit was xlink:href which should simply be href. Replacing that solved the issue, but I also removed all other deprecated attributes, and ended up with this:
<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="347" viewBox="0 0 2048 347">
<image width="2048" height="347" href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//...FFFABRRRQAUUUUAf/Z"/>
</svg>And this SVG image works fine inside markupExt.renderToCanvas() as well.
