1. Home
  2. Forum
  3. ASP.NET Web Forms (Classic)
  4. I am not able to display the image inside an image node

I am not able to display the image inside an image node

Hi.
My name is Riccardo Esercitato and I am experimenting with DIAGRAM control and VB and ASP.NET.
Here is the VB Code, very simple and straightforward:

Imports Syncfusion.JavaScript.DataVisualization.Models.Diagram
Imports Syncfusion.JavaScript.DataVisualization.DiagramEnums
Imports Syncfusion.JavaScript.DataVisualization.Models
Imports Syncfusion.JavaScript.DataVisualization.Models.Collections

Partial Class MyPage
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            InitDiag()
        End If
    End Sub

    Private Sub InitDiag()
        Dim manufacturing As BasicShape = CreateNode("manufacturing", 175, 60, 300, 60, "Manufacturing Tablet PC", "#05ADA4")
        manufacturing.Shape = BasicShapes.Path
        manufacturing.PathData = "M 269.711,29.3333C 269.711,44.061 257.772,56 243.044,56L 158.058,56C 143.33,56 131.391,44.061 131.391,29.3333L 131.391,29.3333C 131.391,14.6057 143.33,2.66669 158.058,2.66669L 243.044,2.66669C 257.772,2.66669 269.711,14.6057 269.711,29.3333 Z"

        Dim immagine As ImageNode = CreateImage("D:\Risorse\Images\RedForest.jpg", 100, 200, 140, 300)

        Diagram1.PageSettings.PageWidth = 1100
        Diagram1.PageSettings.PageHeight = 1200
        Diagram1.PageSettings.ShowPageBreak = False
        Diagram1.PageSettings.MultiplePage = False
        Diagram1.ShowTooltip = True
        Diagram1.Model.Nodes.Add(manufacturing)
        Diagram1.Model.Nodes.Add(immagine)
    End Sub

    Private Function CreateNode(name As String, width As Double, height As Double, offsetx As Double, offsety As Double, labelText As String, fillColor As String) As BasicShape
        Dim node As New BasicShape()
        With node
            .Name = name
            .Width = width
            .Height = height
            .OffsetX = offsetx
            .OffsetY = offsety
            .FillColor = fillColor
            .BorderColor = "#000000"
            Dim label As New Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label()
            label.Text = labelText
            label.FontColor = "white"
            label.Name = name + "_label"
            .Labels.Add(label)
        End With
        Return node
    End Function

    Private Function CreateImage(sPath As String, offsetx As Integer, offsety As Integer, xsize As Integer, ysize As Integer) As ImageNode
        Dim node As New ImageNode
        With node
            .Name = "Img01"
            .OffsetX = offsetx
            .OffsetY = offsety
            .Width = xsize
            .Height = ysize
            .Source = sPath
        End With
        Return node
    End Function

End Class


And here is the result:


As you can see, the image node has been created and correctly dimesioned, but no image appears.
I already tried to change picture path and picture type too (PNG, JPG ...) but nothing changes.

I am wrong somewhere, but I'm not able to discover where... can someone help me, please? 
Thanks a lot

Riccardo ESERCITATO
Italy




8 Replies
RT Ramya Thirugnanam Syncfusion Team October 17, 2018 11:09 AM UTC

 
Hi Riccardo, 
 
We have created a simple sample to show the image in diagram using ImageNode. Please refer to the sample from the below link. 
 
Sample link:ImageNode
 
 
  
Please include the image in the project to show the image in diagram. 
  
Regards, 
Ramya T 


RI Riccardo October 18, 2018 06:17 AM UTC

Thanks Ramya.
I'll give it a look and will let you know.
Riccardo

PR Padmini Ramamurthy Syncfusion Team October 18, 2018 06:21 AM UTC

HI Riccardo, 
  
We will wait to hear from you. 
  
Regards, 
Padmini R. 


RI Riccardo October 18, 2018 08:06 AM UTC

Ramya, Padmini,
thanks a lot for your answer.

Unfortunately my problem is still present.
First of all I am not able to run your sample, it gives me an error at first row in global.asax:
<%@ Application Codebehind="Global.asax.cs" Inherits="SyncfusionASPNETWebApplication1.Global" Language="C#" %>
saying that it is not able to load "SyncfusionASPNETWebApplication1.Global" type.

I'va changed my VB source code as follows, including that image in my files:

        Dim immagine As ImageNode = CreateImage("..//..//monitor-logo.jpg", 100, 200, 140, 300)
        Try
            immagine.Source = "..//..//monitor-logo.jpg"
        Catch ex As Exception

        End Try

wich will execute without errors, but with the same wrong result: image control still does not contain the image.

Attached file contais the project, wich has been generated choosing the "Syncfusion ASP NET Web Site" template.
Please just ignore everything but the MyPage.aspx page, wich is (has to be) the start page.

Can you look at / try my code and address me to the solution? 

Thanks a lot
Riccardo


RI Riccardo October 18, 2018 08:27 AM UTC

Sorry for previous mail, attachment is not wrong but maybe not clear.
This one is better.

As you can see I've forced
image path as follows:

D:/Ambiente sviluppo ASP.NET/SyncfusionASPNETWebSite2/monitor-logo.jpg

Please change it as necessary for you.
I even added a Text node, rotating it to 30 degrees and it is ok.
Seems that only image node (wich I need for my app) won't like to run.

Thank you again

RT Ramya Thirugnanam Syncfusion Team October 18, 2018 10:12 AM UTC

Hi Riccardo, 
 
Regards to show image from physical path to the node, please place the image parallel or with respect to project folder and including the project is not mandatary.   
 
Firefox and Chrome will not allow to show image from physical path due to security reasons. 
Please find the discussion for the same as below. 
 
Please find the code example and comments as below. 
ImageNode Equipment = CreateNode("Equipment", 100, 100, 300, 300); 
 
            // Place image parallel to project folder (no need to include in project). 
            Equipment.Source = "..//..//custom_images/monitor-logo.jpg"; 
 
 
            // It only get work with IE browser not with Firefox and Chrome due to security concerns. 
            //Equipment.Source =  "D:/images/monitor-logo.jpg"; 
 
            Diagram1.Model.Nodes.Add(Equipment); 
 
 
Regards, 
Ramya T 


RI Riccardo October 18, 2018 01:52 PM UTC

Ramya,
thanks a lot, it was my fault in using a physical path. 
Using a relative path everything works fine.

Now I continue in my experiments. Will let you know.

Thanks again
Riccardo

RT Ramya Thirugnanam Syncfusion Team October 19, 2018 04:31 AM UTC

HI Riccardo,  
 
   
We will wait to hear from you.  
 
   
Regards,  
Ramya T 


Loader.
Up arrow icon