Go. Picture Images not showing


Go. Picture Images not showing when minimizing it as part of a custom library.

Here is the sample html file inside the custom library

the go pictures are on the upper right here is the whole node code, you can see in the end the go panel with the go pictures

myDiagram.nodeTemplate = // regular node: a Step or a Task
				$(go.Node, "Horizontal", //{ selectionAdorned: false },
					new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), {
						// the Node.location is at the center of each node
						locationSpot: go.Spot.TopLeft
					$(go.Shape, "Rectangle", {
							fill: null,
							strokeWidth: 1,
							stroke: null,
							width: 4,
							stretch: go.GraphObject.Vertical,
							alignment: go.Spot.Left
						new go.Binding("fill", "match", getNoteColor),
						new go.Binding("stroke", "match", getNoteColor)
					$(go.Panel, "Auto", 
						$(go.Shape, "Rectangle", {
								fill: "#DEDEDE",
								cursor: "pointer",
								fromLinkable: true,
								toLinkable: true,
								height: 80,
								width: 110,
								stroke: "#D4D4D4",
								fill: "#F5F5F5",
								isGeometryPositioned: true
							new go.Binding("figure", "shape"),
							new go.Binding("fill", "color"),
							new go.Binding("height", "height"),
							new go.Binding("width", "width"),

						$(go.TextBlock, {
								font: "10pt EYInterstate",
								margin: 10,
								editable: true,
								wrap: go.TextBlock.BreakAll,
								width: 110,
								maxLines: 3,
								isMultiline: true,
								textAlign: "center"
							new go.Binding("text").makeTwoWay(),
							new go.Binding("alignment", "align")),

						$(go.Shape, "Circle", {
								alignment: go.Spot.BottomRight,
								stroke: "yellow",
								fill: "yellow",
								width: 10,
								height: 10,
								margin: new go.Margin(0, 5, 5, 0)
							new go.Binding("fill", "owner"),
							new go.Binding("stroke", "owner"),
						$(go.Panel, "Horizontal", { 
								alignment: go.Spot.TopRight 
							$(go.Picture, {
									margin: new go.Margin(5, 5, 0, 0),
									source: "resources/info.png",
									visible: true
								new go.Binding("visible", "s4impact", getVisibility),
							$(go.Picture, {
									margin: new go.Margin(5, 5, 0, 0),
									source: "resources/message.png",
									visible: true
								new go.Binding("visible", "comment", getVisibility),


so for the sample in custom library its working however when that custom library is being used outside

It will not show even if I had hardcoded the visibility of the pictures as true

Can someone shed a light on me on why is it happening?

Thank You.

It seems to me that the browser is unable to find the image file, probably because a URL such as “resources/info.png” is no longer accessible. That is probably due to whatever packaging your build procedure did when you made it for “outside”, whatever that means.

Hi Walter,

Thanks for pointing that out! I have fixed it by converting my svg picture file to base64, I have checked all the ways to do it but it seems it can’t find the physical file so I had tried it and it worked!

Thank You!