We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to put an image into diagram component?

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?


1 Reply

SU Sumathi Uthayakumar Syncfusion Team November 18, 2022 06:31 AM

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

Loader.
Live Chat Icon For mobile
Up arrow icon