Category / Section
How to add Image node in Symbol palette in Blazor
1 min read
In the Blazor diagram, you can host images in the Symbol Palette. Hosting custom objects like Images or textboxes in the Symbol Palette can be achieved using nodes. The Source property of the
node allows you to set an image reference path, and the Type property sets the shape type.
Refer to the following code example to learn how to show images in the Symbol Palette:
// Creates a collection for nodes
public ObservableCollection<DiagramNode> basicShapes { get; set; } = new ObservableCollection<DiagramNode>();
//…
DiagramNode Imagenode = new DiagramNode()
{
Id = "Image",
Height = 100,
Width = 100,
Shape = new DiagramShape() { Type = Syncfusion.Blazor.Diagrams.Shapes.Image, Source = "https://www.syncfusion.com/content/images/nuget/sync_logo_icon.png" }
};
// Adds Image into the basic shapes collection
basicShapes.Add(Imagenode);
Sample link: https://www.syncfusion.com/downloads/support/directtrac/283773/ze/HTML-Node1121046392
