Svg Image cannot be rendered when render event is triggered

[JingSheng02]

I create a custom marker that follow the example of TriangleMarker, which i change the polygon to image and put the png, then when i open the marker area, i can drag and drop the marker well, but when i save, the image cannot be rendered.

HTML <div class="position-relative d-flex justify-content-center align-items-center p-0 m-0 marker-container"><img src="{{ asset('images/test2.jpeg') }}" alt="" class="w-100" id="unit-img" onclick="showMarker()"></div>

Javascript let markerArea = new markerjs2.MarkerArea(document.getElementById('unit-img')); markerArea.settings.displayMode = 'popup'; markerArea.targetRoot = document.querySelector('.marker-container'); markerArea.availableMarkerTypes = [ window.kioskMarker, window.pillarWrappingMarker, window.triangleMarker, ]; markerArea.uiStyleSettings.zoomButtonVisible = true; markerArea.uiStyleSettings.zoomOutButtonVisible = true; markerArea.settings.defaultColor = '#082454';

pillar-wrapper-marker.js

createVisual() {
    this.visual = SvgHelper.createImage([
        ['href', 'http://localhost/images/pillar-wrapper.png'],
        ['width', '50'],
        ['height', '20'],
    ]);
    this.addMarkerVisualToContainer(this.visual);
}

setPoints() {
    super.setSize();
    SvgHelper.setAttributes(this.visual, [
        ['href', 'http://localhost/images/pillar-wrapper.png'],
        ['width', this.width],
        ['height', this.height],
    ]);
}

[bennymeier]

Maybe you put some code so others can help you easier.

[JingSheng02]

Maybe you put some code so others can help you easier.

@bennymeier FYI, I've provided the code. Thanks for your help.