I have this node template and what seems to be happening is the images do not show sometimes or all the time. The rel='nofollow' href link to the images are correct but sometimes none of the browsers show the images, sometimes they will show some of the images. Example is IE/Edge will show them all, but not, depending on the rel='nofollow' href. Chrome will show half the photos and Firefox will NEVER show the photos. My URLs to the photos are valid. the nodes display correctly otherwise and do not show a broken image either.
function setNodeTemplate(obj, diagram) {
var picPath = '@(System.Configuration.ConfigurationManager.AppSettings["picPath"])'
var content = new ej.diagrams.StackPanel();
content.id = obj.id + '_outerstack';
content.orientation = 'Horizontal';
content.style.strokeColor = 'gray';
content.style.fill = 'transparent';
content.padding = { left: 5, right: 10, top: 5, bottom: 5 };
var img = new ej.diagrams.ImageElement();
img.id = obj.id + '_pic';
if (Number(obj.data.Id) <= 0) {
img.source = picPath + 'empty-S.jpg';
}
else {
img.source = picPath + obj.data.Id + '-S.jpg';
}
var innerStack = new ej.diagrams.StackPanel();
innerStack.style.strokeColor = 'none';
innerStack.margin = { left: 5, right: 0, top: 0, bottom: 0 };
innerStack.id = obj.id + '_innerstack';
innerStack.style.fill = 'transparent';
var text = new ej.diagrams.TextElement();
text.style.bold = true;
text.id = obj.id + '_name';
text.content = obj.data.Name;
text.style.color = 'white';
var desigText = new ej.diagrams.TextElement();
desigText.id = obj.id + '_desig';
desigText.content = obj.data.Role;
desigText.style.color = 'white';
innerStack.children = [text, desigText];
content.children = [img, innerStack];
return content;
}
