Adding an Image to an HTML Node

[dsoftware]

I am assessing SyncFusion JS for my organization, we attempting to port some functionality from a desktop application to the web.  Here I have a simple HTML Node with an image, however the image does not load.  Do you know why this might be?  Below is my code and attached are screenshots of my node with the broken image and a screenshot of the image path in VS.

@model MarketWideOnline_NewLogin.Models.PackageManager.PackageViewModel

<!—define html element-->
<script id="htmlTemplate" type="text/x-jsrender">
    <img src="~/Content/images/Delete.png"/>
</script>

<div id="diagram"></div>
<script type="text/javascript">

    function remove() {
        var diagram = $("#diagram").ejDiagram("instance");
        //to get the selected items
        var selectedItem = diagram.model.selectedItems.children[0];
        if (selectedItem) {
            //remove the selected item
            diagram.remove(selectedItem);
        }
        //update the layout
        diagram.layout();
        alert("Hello world!");
    }

    $(document).ready(function () {
        var nodes = [{
            name: "htmlNode", offsetX: 100, offsetY: 100,
            width: 200, height: 100,
            labels: [{text:"text"}],

            //Sets type as Html
            type: ej.datavisualization.Diagram.Shapes.Html,
            shape: "terminator",

            //Sets id of html template
            templateId: "htmlTemplate",
            value: "Close"
        }];

        //You can configure this “Employee Information” with Diagram, so that the node and connector are automatically generated using mapping properties.
        //The following code examples show how dataSourceSetting is used to map id and parent with property name identifiers for employee information.
        $("#diagram").ejDiagram({
            width: "100%",
            height: "650px",
            nodes: nodes
        })
    });
</script>

Attachment: HTMLNodeWithBrokenImage_86e31700.zip

[dsoftware]

Attached is the image path seen in VS.

Attachment: ImagePath_b4068482.zip

[Aravind Ravi]

Hi Dsoftware, 

We are unable to reproduce the reported issue at our end. We suspect that the issue occurs due to you have refer the image path incorrectly to the image source. So that the image does not get refer and shown as image broken. We have attached a simple sample in that we have refer image from online where image gets properly referred and display in the node. Please find the sample in below link 

Sample: https://jsplayground.syncfusion.com/44flin3l 

If you want to use image in node means then you can use the image node instead of define the image tag in the HTML node. For more information about image node please refer to below UG documentation link 

UG Link: https://help.syncfusion.com/js/diagram/shapes#image 

Regards 

Aravind Ravi 

[dsoftware]

Thanks!  So it turns out that the issue was with how I was referencing the image.  I am used to using the following:

"~/Content/images/image.png"

I ended up having to use the following to get this to work:

"../../Content/images/image.png"

Thanks again!

[Aravind Ravi]

Hi Dsoftware, 

  

Thanks for the update. 

  

Regards 

Aravind Ravi