Picture not visible on pallete

The picture is not visible on the nodes in pallette which are already in diagram.

index.html is given below

 <!DOCTYPE html>
 <html>
	 <head>
	 	<title>Sample go</title>
	 	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
	 	<script type="text/javascript" src="http://gojs.net/latest/release/go.js"></script>
	 	<script type="text/javascript" src="icons.js"></script>
		<style type="text/css">
			#contextMenu {
			    position: absolute;
			    left: 5px;
			    background-color: transparent;
			    font-size: 12px;
			    font-family: sans-serif;
			    font-weight:bold;
			    height: 278px;
			    display: block;
			    z-index: 3;
			    
			}
			#paletteWrap{
				border: 1px solid #444;
				padding: 6px;
				box-shadow: 0 0 10px rgba( 0, 0, 0, .4 );
				background-color: #FFFFFF
			}
			#myPalette {
			    border: 1px solid #444;
			    box-shadow: 0 0 10px rgba( 0, 0, 0, .4 );
			    width:606px; 
			    height:200px; 
			    background-color: #FFFFFF;
			}

			.triangle {
				width: 0;
				height: 0;
				border-top:9px solid #B6B6B6;
				border-left: 12px solid transparent;
				border-right: 12px solid transparent;
				margin-left: 303px;
			}
		</style>



	</head>
	<body style="background-color: #DDDDDD;">
	  	<div id = "programWrap" style="display: inline-block;position: relative;">
	       					 <div id="myDiagram"
	     style="width:1190px; height:530px; "></div> 
	     					<div id="contextMenu">   
							<div id="paletteWrap">
	     					 		<div id="myPalette"></div>
							</div>	     		 				
							<div class = "triangle " ></div>
	      						
	      					</div>
	      				</div>

	</body>
	<script type="text/javascript" src="app.js"></script>
	
</html>

app,js is given below

var defaultDiagramData = '{ "class": "go.GraphLinksModel", "nodeDataArray": [{"category":"Start",  "pic":"Start", "loc":"-201.78125762939453 178.5833282470703", "key":-1}, {"category":"End", "pic":"End", "loc":"786.2187423706055 178.5833282470703","key":-2}], "linkDataArray": [ {"from":-1, "to":-2, "points":[-151.28125762939453,178.5833282470703,-141.28125762939453,178.5833282470703, 292.21874237060547,178.5833282470703,292.21874237060547,178.5833282470703,725.7187423706055,178.5833282470703,735.7187423706055,178.5833282470703]} ]}';
var createNode = [];
var adornedPart;
var part;
var linkHoverAdornment


$(function() {


    $("#contextMenu").hover(function() {
        linkHoverAdornment.adornedObject = part;
        part.addAdornment("mouseHover", linkHoverAdornment);
    }, function() {
        part.removeAdornment("mouseHover");
        $("#contextMenu").hide();
    });
	init();
  
});

var colors = {
    darkGreen: '#006400',
    greenApple: '#4CC417',
    darkBlue: '#0000A0',
    purple: '#800080',
    burgundy: '#8C001A',
    blue: "#00B5CB",
    orange: "#FFA500",
    silver: "#C0C0C0",
    white: "#FFFFFF",
    dodgerblue: "dodgerblue",
    firebrick: "#F62817",
    chocolate: '#C85A17',
    blueGray: '#98AFC7',
    cobaltBlue: '#0020C2',
    lightStateBlue: '#736AFF',
    butterflyBlue: '#38ACEC',
    venomGreen: '#728C00',
    sandstone: '#786D5F',
    green: '#00FF00',
    yellow: '#FFFF00',
    deepSkyBlue: '#3BB9FF',
    red: '#FF0000'

}

function init() {

    var gojs = go.GraphObject.make;

    // This converter is used by the Picture.
	function picFunc(pic) {
    	 return pic + ".svg";
	}

    myDiagram = gojs(go.Diagram, "myDiagram", {
        initialContentAlignment: go.Spot.Center,
         "animationManager.duration": 800, 
        "undoManager.isEnabled": true, 
        hoverDelay: 0
    });

    
   

    function nodeStyle() {
        return [
            new go.Binding("location", "loc", go.Point.parse)
            .makeTwoWay(go.Point.stringify), {
                locationSpot: go.Spot.Center,
                mouseEnter: function(e, obj) {
                    showPorts(obj.part, true);
                },
                mouseLeave: function(e, obj) {
                    showPorts(obj.part, false);
                }
            }
        ];
    }

    function makePort(name, spot, output, input) {
        return gojs(go.Shape, "Circle", {
            fill: "transparent",
            strokeWidth: 2,
            stroke: null, 
            desiredSize: new go.Size(8, 8),
            alignment: spot,
            alignmentFocus: spot, 
            portId: name,
            fromSpot: spot,
            toSpot: spot, 
            fromLinkable: output,
            toLinkable: input, 
            cursor: "pointer" 
        });
    }


    myDiagram.nodeTemplateMap.add("Start",
        gojs(go.Node, "Spot", nodeStyle(),
            gojs(go.Panel, "Auto",
                gojs(go.Shape, "Rectangle", {
                    fill: "transparent",
                    width: 100,
                    height: 81,
                    stroke: "black",
                    strokeWidth: 1
                }),
                gojs(go.Picture,
                    new go.Binding("source", "pic", picFunc)
                )
            ),
            makePort("R", go.Spot.Right, true, true)
        )
    );

    myDiagram.nodeTemplateMap.add("End",
        gojs(go.Node, "Spot", nodeStyle(),
            gojs(go.Panel, "Auto",
                gojs(go.Shape, "Rectangle", {
                    fill: colors['white'],
                    width: 100,
                    height: 81,
                    stroke: "black",
                    strokeWidth: 1
                }),
                gojs(go.Picture,
                    new go.Binding("source", "pic", picFunc)
                )
            ),
            makePort("T", go.Spot.Top, false, true),
            makePort("L", go.Spot.Left, false, true),
            makePort("B", go.Spot.Bottom, false, true)
        )
    );

    myDiagram.nodeTemplateMap.add("Arrow",
        gojs(go.Node, "Spot", nodeStyle(),

            gojs(go.Panel, "Auto",
                gojs(go.Shape, "Rectangle", {
                        fill: colors['white'],
                        width: 100,
                        height: 81,
                        stroke: "black",
                        strokeWidth: 1
                    }

                ),
                gojs(go.Picture,
                    new go.Binding("source", "pic", picFunc)
                )
            ),
            // four named ports, one on each side:
            makePort("T", go.Spot.Top, true, false),
            makePort("L", go.Spot.Left, true, true),
            makePort("R", go.Spot.Right, true, false),
            makePort("B", go.Spot.Bottom, true, false)
        )
    );

   
   

    myDiagram.nodeTemplateMap.add("Unlike",
        gojs(go.Node, "Auto", nodeStyle(),
            gojs(go.Panel, "Auto",
                gojs(go.Shape, "Rectangle", {
                    fill: colors['white'],
                    width: 100,
                    height: 81,
                    stroke: "black",
                    strokeWidth: 1
                }),
                gojs(go.Picture,
                    new go.Binding("source", "pic", picFunc)
                )
            ),
            makePort("L", go.Spot.Left, true, true),
            makePort("R", go.Spot.Right, true, true),
            makePort("T", go.Spot.Top, true, true),
            makePort("B", go.Spot.Bottom, true, true)
        )
    );
	
	 myDiagram.nodeTemplateMap.add("Comment",
        gojs(go.Node, "Auto", nodeStyle(),
            gojs(go.Panel, "Auto",
                gojs(go.Shape, "Rectangle", {
                    fill: colors['white'],
                    width: 100,
                    height: 81,
                    stroke: "black",
                    strokeWidth: 1
                }),
                gojs(go.Picture,
                    new go.Binding("source", "pic", picFunc)
                )
            ),
            makePort("L", go.Spot.Left, true, true),
            makePort("R", go.Spot.Right, true, true),
            makePort("T", go.Spot.Top, true, true),
            makePort("B", go.Spot.Bottom, true, true)
        )
    );

   

    myDiagram.linkTemplateMap.add("Comment",
        gojs(go.Link, {
                curve: go.Link.Bezier
            },
            new go.Binding("curviness"),
            gojs(go.Shape, {
                stroke: "brown"
            }),
            gojs(go.Shape, {
                toArrow: "OpenTriangle",
                stroke: "brown"
            })
        ));

    myDiagram.linkTemplate = gojs(go.Link, {
            routing: go.Link.AvoidsNodes,
            curve: go.Link.JumpOver,
            corner: 5,
            toShortLength: 4,
            relinkableFrom: true,
            relinkableTo: true,
            reshapable: true
        },
        new go.Binding("points").makeTwoWay(),
        gojs(go.Shape, {
            isPanelMain: true,
            stroke: "gray",
            strokeWidth: 2
        }), gojs(go.Shape, {
            toArrow: "standard",
            stroke: null,
            fill: "gray"
        }), gojs(go.Panel, "Auto", {
                visible: false,
                name: "LABEL",
                segmentIndex: 2,
                segmentFraction: 0.5
            },
            new go.Binding("visible", "visible").makeTwoWay(),
            gojs(go.Shape, "RoundedRectangle", {
                fill: "#F8F8F8",
                stroke: null
            }),
            gojs(go.TextBlock, "Yes", {
                    textAlign: "center",
                    font: "10pt helvetica, arial, sans-serif",
                    stroke: "#333333",
                    editable: true
                },
                new go.Binding("text", "text")
            )
        ), {
            mouseHover: function(e, obj) {
                $("#contextMenu").hide();
                var link = obj.part;
                part = link;
                linkHoverAdornment.adornedObject = link;
                link.addAdornment("mouseHover", linkHoverAdornment);
            }
        }
    );

    // temporary links used by LinkingTool and RelinkingTool are also
    // orthogonal:
    myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
    myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;


    // initialize the Palette that is on the left side of the page
    myPalette = gojs(go.Palette, "myPalette", {
        "animationManager.duration": 800,
        "undoManager.isEnabled": true,
        nodeTemplateMap: myDiagram.nodeTemplateMap,
        model: new go.GraphLinksModel([{
            category: "Start",
            pic: "Start"
        }, {
            category: "Arrow",
            pic: "Arrow"
           }, {
            category: "Unlike",
            pic: "Unlike",
        }, {
            category: "End",
            pic: 'End'
        }, {
            category: "Comment",
            pic: "Unlike",
        }])
    });

    
    myPalette.addDiagramListener("ObjectDoubleClicked", onPalleteNodeSelected);

    linkHoverAdornment =
        gojs(go.Adornment, "Spot", {
                background: "transparent",
                mouseLeave: function(e, obj) {
                    adornedPart = obj.part.adornedPart;
                    adornedPart.removeAdornment("mouseHover");
                    adornedPart = undefined;
                }
            },
            gojs(go.Placeholder, {
                background: "transparent"
            }),
            gojs("Button", {
                    alignment: go.Spot.Center,
                    alignmentFocus: go.Spot.Center
                }, {
                    click: addNodeAndLink
                }, {
                    width: 30,
                    background: "transparent",
                    mouseEnter: function(e, obj) {
                        var shape = obj.findObject("SHAPE");
                        //shape.fill = "#6DAB80";
                    },
                    height: 30
                },
                gojs(go.TextBlock, "+", {
                    maxSize: new go.Size(160, NaN),
                    wrap: go.TextBlock.WrapFit
                }))
        );
    $("#contextMenu").hide();


      myDiagram.model = go.Model.fromJson(defaultDiagramData);
   
}


// Make link labels visible if coming out of a "conditional" node.
// This listener is called by the "LinkDrawn" and "LinkRelinked"
// DiagramEvents.
function showLinkLabel(e) {
    var label = e.subject.findObject("LABEL");
    if (label !== null)
        label.visible = (e.subject.fromNode.data.figure === "Diamond");
}

// Make all ports on a node visible when the mouse is over the node
function showPorts(node, show) {
    var diagram = node.diagram;
    if (!diagram || diagram.isReadOnly || !diagram.allowLink)
        return;
    node.ports.each(function(port) {
        port.stroke = (show ? "red" : null);
    });
}



function onPalleteNodeSelected(e) {
    var node = e.diagram.selection.first();
    var nodeData = node.data;
    delete nodeData["__gohashid"];
    delete nodeData["gohashid"];
    delete nodeData["key"];
    createNewNode(nodeData);
}

function addNodeAndLink(e, obj) {
    var cxElement = document.getElementById("contextMenu");
    var mousePt = myDiagram.lastInput.viewPoint;
    cxElement.style.display = "block";
    var x = mousePt.x - 313;
    var y = mousePt.y - 255;
    cxElement.style.left = x + "px";
    cxElement.style.top = y + "px";
    var adorn = obj.part;
    e.handled = true;
    var diagram = adorn.diagram;
    var lastInput = myDiagram.lastInput.documentPoint;
    // get the node data for which the user clicked the button
    var fromNode = adorn.adornedPart;
    var link = fromNode.data;
    var loc = (lastInput.x - 20) + " " + (lastInput.y - 23);
    // create a new "State" data object, positioned off to the right of the adorned Node
    toNode = fromNode.toNode.data;
    fromNode = fromNode.fromNode.data;
    createNode.toNode = toNode;
    createNode.fromNode = fromNode;
    createNode.location = loc
    createNode.link = link;
}

function createNewNode(newNode) {
    newNode.loc = createNode.location;
    myDiagram.startTransaction("Add State");
	myPalette.requestUpdate();
    var model = myDiagram.model;
    model.addNodeData(newNode);
    model.removeLinkData(createNode.link);
    // create a link data from the old node data to the new node data
    var linkdata = {
        from: model.getKeyForNodeData(createNode.fromNode), // or just: fromData.id
        to: model.getKeyForNodeData(newNode)
    };
    var linkdatas = {
        from: model.getKeyForNodeData(newNode), // or just: fromData.id
        to: model.getKeyForNodeData(createNode.toNode)
    };
    // and add the link data to the model
    model.addLinkData(linkdata);
    model.addLinkData(linkdatas);

    myDiagram.commitTransaction("Add State");
    $("#contextMenu").hide();
    if (adornedPart != undefined) {
        adornedPart.removeAdornment("mouseHover");
        adornedPart = undefined;
    }
}

I am using svg image as picture.

Modifying or in your case deleting the “__gohashid” property is definitely unsupported, probably resulting in undefined behavior.

Thanks walter. But without Delete also am not able to see the picture. :frowning: But i can see the picture when i starts draging

As the Introduction to Auto Panels clearly states, you probably should not be setting the size of the Shape that is the main element of the Auto Panel: http://gojs.net/latest/intro/panels.html

Furthermore, as the Introduction to Pictures clearly states, you should be setting the size of the Picture: http://gojs.net/latest/intro/pictures.html