How to put an image into diagram component?

[Tony Criswell]

Greetings,

I'm trying to put an image on the diagram and then add annotations over/around it.

How do I add an image to the diagram component?

[Sumathi Uthayakumar]

Hi Tony,

We have prepared a sample based on your requirements. We have an image shape property that allows you to set the image for the node by using the image shape's source property. You can also use the Annotations property to add annotations to an image node. We have shared our online UG link as well as code snippets and samples for your reference.

Code snippet:

  //To set background image and add annotation for  image node

 

Node ImageNode = new Node() { ID = "ImageNode", Annotations=new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "content" } }, Width = 100, Height = 100, OffsetX = 700, OffsetY = 100,

Shape = new ImageShape() { Type = NodeShapes.Image, Source = https://www.w3schools.com/images/w3schools_green.jpg } };

 

 

UG link:

https://blazor.syncfusion.com/documentation/diagram/shapes#image-node

https://blazor.syncfusion.com/documentation/diagram/annotations/labels

Regards,

Sumathi U.

Attachment: ForumSample_a3606db5.zip