We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ImageElement doesn't always show images

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;

1 Reply

SG Shyam G Syncfusion Team August 2, 2019 12:07 PM UTC

Hi Chad, 
We have applied your code example in our sample and an image is rendered properly in the layout. We are unable to replicate an issue at our end. Could you please share us more details such as modify the below sample. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon