How to Upload Image Node With Hyperlink of React Diagram?

In the React Diagram & symbol palette, you can add an Image node with a hyperlink. The hyperlink is visible only when you drag an image node from the palette onto the diagram. The shape property of the node allows you to define the type of node. To create an Image node, set the shape property to Image. The annotations property allows you to set the hyperlink. To add a hyperlink, use the annotations property. Within the hyperlink, specify the hyperlink text using the content property. Then, use the link property to define the destination URL. The following code explains how an Image node with a hyperlink is created.

var imageNode = [
   {
       id: "image",
       width: 100,
       height: 100,
       // Sets the type of the shape as HTML
       shape: {
         type: 'Image', 
         source: 'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png' 
       },
       annotations: [{
           hyperlink: {
             content: 'This is Image Node', 
             link: 'https://ej2.syncfusion.com/react/documentation/diagram/labels#hyperlink',
             // Set the link to open in the new tab
             hyperlinkOpenState: 'NewWindow'
           }
       }]
   }
];

The SymbolPalette displays a collection of palettes, each containing a set of nodes and connectors that can be dragged and dropped into the diagram. Each palette allows you to display a group of related symbols and includes a header to annotate the group textually. To display an Image node in the symbol palette, use the palette’s symbols property to define the Image node. This ensures that the defined Image node is displayed within the symbol palette. Please refer to the following code sample to see how to define an Image node with a hyperlink in the palette symbols.

<SymbolPaletteComponent id="symbolpalette" expandMode="Multiple" palettes={[
           {
               id: "html",
               expanded: true,
               symbols: imageNode,
               title: "ImageNode"
           },
           
]} width={"100%"} height={"471px"} symbolHeight={60} symbolWidth={60} symbolMargin={{ left: 15, right: 15, top: 15, bottom: 15 }} getSymbolInfo={(symbol) => {
    return { fit: true };
}}> 

Kindly refer to the working sample for your reference

Sample

Conclusion

I hope you enjoyed learning about how to upload an Image node with a hyperlink in React Diagram.

You can refer to our React Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our React Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!