Picture node does not work

GoJS
1

Hello, I am trying to load an image, but I did nothing.

my code:

var model =  GO(go.GraphLinksModel,  {       
        nodeDataArray,
        linkDataArray 
});

myDiagram = GO(go.Diagram, 'myDiagramDiv', {
	"undoManager.isEnabled": true,
	 layout: GO(go.TreeLayout,  { angle: 0, nodeSpacing: 10, layerSpacing: 40 })
});

myDiagram.nodeTemplateMap.add("nodo_normal",GO(go.Node, 'Vertical', 
	 	GO(go.Picture, { 
	 		name: "SHAPE",
	 		desiredSize: new go.Size(40, 30),
	 		fromSpot: new go.Spot(0.5, 0.75, 0, 0), toSpot: new go.Spot(0.5, 0.25, 0, 0),
            fromLinkable: true, toLinkable: true,
            fromLinkableDuplicates: true, fromLinkableSelfNode: true,
            toLinkableDuplicates: true, toLinkableSelfNode: true,
            cursor: "pointer",
            portId: ""
	 	},
	        new go.Binding("source", "sourse")
	 	),
		GO(go.TextBlock, "text", { name: "TEXTBLOCK", font: '8pt Segoe UI, sans-serif', margin: new go.Margin(3, 0, 5, 0), cursor: "all-scroll" ,fromLinkable: false, toLinkable: false , editable: false}, 
				new go.Binding('text', 'text')
		)
	));

myDiagram.model =  model;
myDiagram.groupTemplate.ungroupable = false;

myDiagram.undoManager.isEnabled = true;

Link Data Array:

  nodeDataArray": [ 
 {"category":"nodo_normal", "key":"OLT-ZOFRI-1:0/1/4", "description":"", "type":"olt_puerta",           
"group":"", "isGroup":"false", "text":"OLT-ZOFRI-1:0/1/4", "sourse":"images/topologia/olt.png"},
{"category":"nodo_normal", "key":"Splitter", "description":"", "type":"splitter", "group":"", 
"isGroup":"false", "text":"Splitter", "sourse":"images/topologia/splitter.png"},
{"category":"nodo_normal", "key":"0", "description":"", "type":"ont", "group":"Grupo1", 
"isGroup":"false", "text":"10000511381", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"1", "description":"", "type":"ont", "group":"Grupo1", 
"isGroup":"false", "text":"10000310067", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"2", "description":"", "type":"ont", "group":"Grupo1", 
"isGroup":"false", "text":"10000316405", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"3", "description":"", "type":"ont", "group":"Grupo1", 
"isGroup":"false", "text":"10000310318", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"4", "description":"", "type":"ont", "group":"Grupo1", 
"isGroup":"false", "text":"10000515607", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"5", "description":"", "type":"ont", "group":"Grupo1", 
"isGroup":"false", "text":"10000479020", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"6", "description":"", "type":"ont", "group":"Grupo1", 
"isGroup":"false", "text":"10000453787", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"7", "description":"", "type":"ont", "group":"Grupo1", 
"isGroup":"false", "text":"10000317181", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"8", "description":"", "type":"ont", "group":"Grupo1", 
"isGroup":"false", "text":"10000431666", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"Caja1", "description":"", "type":"caja", "group":"Grupo1", 
"isGroup":"false", "text":"Caja 1", "sourse":"images/topologia/switch2.png"},   
{"category":"grupo_principal", "key":"Grupo1", "description":"", "type":"caja", "group":"", 
"isGroup":"true", "text":"Grupo 1", "sourse":""},
{"category":"nodo_normal", "key":"9", "description":"", "type":"ont", "group":"Grupo2", 
"isGroup":"false", "text":"10000310563", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"10", "description":"", "type":"ont", "group":"Grupo2", 
"isGroup":"false", "text":"10000310530", "sourse":"images/topologia/ont.png"},
{"category":"nodo_normal", "key":"11", "description":"", "type":"ont", "group":"Grupo2", 
"isGroup":"false", "text":"10000310909", "sourse":"images/topologia/ont.png"}]

image
image773×411 26.8 KB

2

It certainly seems that it’s not loading the image file successfully.

If you add an <img src="images/topologia/ont.png"> element to your page, does it display the image that you are expecting?

3

yes, when using <img …
if it shows me the image

4

Are you serving the page on localhost:?
Do you get the same behavior in a different kind of browser?

5

Yes in Localhost.
i try in google chrome and Edge

6

And not with a different port? I was wondering if you have a CORS security problem. Do a web search about that.

7

What I could observe is that the nodes are not reading any of the properties of the:
myDiagram.nodeTemplateMap.add (“node”, GO (go.Node, ‘Vertical’,

I tried changing the category, but it doesn’t work

8

I already have it.
in the NodeDataArray the nodes had this property:
… “isGroup”: “false”, …
but I was taking it as a group, not as a node

9

Oh, so you are not using the node template that you quoted above? OK, what is an example of the node data object in the model that does not appear with the node template that you expected in the diagram? I could not match up any of the model objects that you quoted with the nodes I saw in the screenshot.

10

To clarify for anyone else reading this, the value of "false" is truthy. The property value should not be a string but just a false or true value.