Showing image in image control using vb.net and asp.net

I am having a lot of difficulty trying to get the image that is stored in a database to show up in the image control on my web page.  I have successfully loaded the image into the database with the below code, and retrieving it is not a problem either - except that I cannot get the image into the image control.  I have tried mutiple different codes to get the image to load into the image control, but nothing has worked.

Can anyone help?  Below is the code snipett.

Any help would be greatly appreciated.

Thanks

asp code for the image control
             <asp:Image ID="ProfileImg" runat="server"
                            BorderStyle="None" BorderColor="Transparent"
                            ImageUrl="" Width="30%"
                            Height="50%" />

This part of the code to load the image data into database works fine:

*******************************************
Protected Sub UploadWhiteImg_Click() Handles UploadWhiteImg.Click
        If (WhiteUpload.HasFile) Then
            Dim savePath As String = "C:\My Documents\"
            Dim fileName As String = WhiteUpload.FileName
            Dim pathToCheck As String = savePath + fileName          
            Dim tempfileName As String = "White" & DieNoDrpDnLst.SelectedValue  
            fileName = tempfileName            

            WhiteUpload.SaveAs(pathToCheck)
        Else
           MessageBox("You did not specify a file to upload.")
        End If
        Dim FileText As String = WhiteUpload.PostedFile.FileName.ToString
        Dim dbcon2 As New SqlConnection("Data Source=...")
        Dim dbcmd2 As New SqlCommand("INSERT INTO PROFILEIMAGES (ProfileImage, DieNumber) VALUES (@ProfileImage, @DieNumber)")
        dbcon2.Open()
        dbcmd2.Connection = dbcon2
        Using ProfileImage As System.Drawing.Image = System.Drawing.Image.FromFile(WhiteUpload.PostedFile.FileName)
(WhiteUpload.PostedFile.FileName.LastIndexOf("\") + 1))
            Using stream As New IO.MemoryStream
                ProfileImage.Save(stream, Imaging.ImageFormat.Jpeg) 'Jpeg
                dbcmd2.Parameters.Add("@ProfileImage", SqlDbType.VarBinary).Value = stream.GetBuffer()
                dbcmd2.Parameters.AddWithValue("@DieNumber", DieNoDrpDnLst.SelectedValue)
            End Using
        End Using
        dbcmd2.ExecuteNonQuery()
        dbcmd2.Dispose()
        dbcon2.Close()
        dbcon2.Dispose()


    End Sub

*************************************
The below code is intended to return the image with a drop down list selectedindexchanged event.  It will return the image, but not in the image control.  It returns the image filling the entire screen.  I am just trying to load the image into the image control.

Protected Sub DieNoDrpDnLst_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DieNoDrpDnLst.SelectedIndexChanged

Dim dbconimg As New SqlConnection("Data Source=io.....")
        Dim dbcmdimg As New SqlCommand("SELECT ProfileImage FROM PROFILEIMAGES WHERE DieNumber =" & DieNoDrpDnLst.SelectedValue)
        dbconimg.Open()
        dbcmdimg.Connection = dbconimg

Dim imageData As Byte() = DirectCast(dbcmdimg.ExecuteScalar(), Byte())          Context.Response.ContentType = "image/jpeg"
        Context.Response.BinaryWrite(imageData)           'ProfileImg.DataBind()
       

        dbcmdimg.Dispose()
        dbconimg.Close()
        dbconimg.Dispose()

End Sub
rckrchAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
One way to do this is to move your image retrieval code to a separate page and in your main page just have this:
    Protected Sub DieNoDrpDnLst_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DieNoDrpDnLst.SelectedIndexChanged
        ProfileImg.ImageUrl = "GetImage.aspx?id=" & DieNoDrpDnLst.SelectedValue
    End Sub

Open in new window

The new page (which as you can see above, I have called GetImage.aspx), contains in the code behind:
Imports System.Data.SqlClient

Public Class GetImage
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Try
            Using dbconimg As New SqlConnection("Data Source=....")
                Using dbcmdimg As New SqlCommand("SELECT ProfileImage FROM PROFILEIMAGES WHERE DieNumber = " & Replace(Request.QueryString("id"), "'", "''"))
                    dbconimg.Open()
                    dbcmdimg.Connection = dbconimg

                    Dim imageData As Byte() = DirectCast(dbcmdimg.ExecuteScalar(), Byte())
                    Context.Response.Clear()
                    Context.Response.ContentType = "image/jpeg"
                    Context.Response.BinaryWrite(imageData)
                    Context.Response.End()
                End Using
            End Using
        Catch ex As Exception
            ' show default image or error
        End Try
    End Sub

End Class

Open in new window

By the way; when using this method there is no need to save the uploaded files to disk. So unless you want those files for another reason, just use this code for the upload:
    Protected Sub UploadWhiteImg_Click() Handles UploadWhiteImg.Click
        If (WhiteUpload.HasFile) Then
        Else
            'MessageBox("You did not specify a file to upload.")
            Exit Sub
        End If
        Using dbcon2 As New SqlConnection("Data Source=....")
            Using dbcmd2 As New SqlCommand("INSERT INTO PROFILEIMAGES (ProfileImage, DieNumber) VALUES (@ProfileImage, @DieNumber)")
                dbcon2.Open()
                dbcmd2.Connection = dbcon2
                Using ProfileImage As System.Drawing.Image = System.Drawing.Image.FromStream(WhiteUpload.FileContent)
                    Using stream As New IO.MemoryStream
                        ProfileImage.Save(stream, Imaging.ImageFormat.Jpeg) 'Jpeg
                        dbcmd2.Parameters.Add("@ProfileImage", SqlDbType.VarBinary).Value = stream.GetBuffer()
                        dbcmd2.Parameters.AddWithValue("@DieNumber", DieNoDrpDnLst.SelectedValue)
                    End Using
                End Using
                dbcmd2.ExecuteNonQuery()
            End Using
        End Using
    End Sub

Open in new window

Of course, another method would be to just save the files to disk (instead of or besides saving to db) and set the image url to the location of that file but I guessed that was not the way you wanted to go.

EDIT: added try/catch in retrieval code.
0
rckrchAuthor Commented:
Thanks very much for the reply robert_schutt, but it still does not work.  I don't get any errors during trouble shooting, but I jsut don't get the image in the image control.

Any other suggestions?

Thanks again.
0
rckrchAuthor Commented:
You can see below where I put the new page code you wrote.  I just put it above my current page load code behind.  Is this where it should be?

Public Class GetImage
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Try
                Using dbconimg As New SqlConnection("Data Source=io....ld")
                    Using dbcmdimg As New SqlCommand("SELECT ProfileImage FROM PROFILEIMAGES WHERE DieNumber = " & Replace(Request.QueryString("id"), "'", "''"))
                        dbconimg.Open()
                        dbcmdimg.Connection = dbconimg

                        Dim imageData As Byte() = DirectCast(dbcmdimg.ExecuteScalar(), Byte())
                        Context.Response.Clear()
                        Context.Response.ContentType = "image/jpeg"
                        Context.Response.BinaryWrite(imageData)
                        Context.Response.End()
                    End Using
                End Using
            Catch ex As Exception
                ' show default image or error
            End Try
        End Sub

    End Class
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
       

        Dim CurCustomer As String = OEMDropDownLst.SelectedValue

        Dim CurProgram As String = PRGRAMListDrpDwn.SelectedValue
       
        Dim CurHennPlant As String = HnPltDrpDn.SelectedValue
        Dim CurAssyDesc As String = AssyNoDrpDn.SelectedValue
       
        Dim CurPartDesc As String = PrtDscDrpDn.SelectedValue
        Dim CurLineNo As String = LineNoDrpDn.SelectedValue
       
        ProgramListDataSource.SelectParam........
0
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Robert SchuttSoftware EngineerCommented:
No, if you already had a page called GetImage then please choose another name. If this is the new page, then don't put other code in it, just the one Page_Load function.
0
Robert SchuttSoftware EngineerCommented:
Depending on your settings you can debug an individual page by just pressing F5 (or the green 'Play' arrow) when you have the file active. Then I added ?id=4 (non-existent in my data) to see the error message, just for testing.
capture 0capture 1In the "Catch" I added:
Response.Write(String.Format("<pre>{0}</pre>", ex.ToString()))

Open in new window

This is useless in normal use (because the output is only used as an image) but will help in debugging.

If that page is working then you need to look at the assignment to ImageUrl, maybe you need to reference the correct location of the page, if the page you're using it on is not in the same folder.
0
rckrchAuthor Commented:
I ma sorry I don't understand everything you are trying to tell me.  I am still somewhat new to this and handling images is all new for me.

I don't know what you mean by the below comment:

'No, if you already had a page called GetImage then please choose another name. If this is the new page, then don't put other code in it, just the one Page_Load function. '

I have to have the page load to handle other procedures in my application page.  I don't already have another page called GetImage.  Bottom line - I don't know where to put this code (including the public class) to make it work.
0
Robert SchuttSoftware EngineerCommented:
That's ok, I'll try to explain better.

You make a new page in your project (in the solution explorer) called GetImage.aspx, you already did that, that's ok, or still need to do it, but this page does not need any other code, only the Page_Load as I posted it.

This page will normally not output any html, just the binary content to display the image. That's the reason the ImageUrl is set to that page instead of containing an image file name directly.

So when you change the value of the dropdownlist, what actually happens is the normal page is loaded and displays the html, but also the GetImage.aspx page is loaded (because the ImageUrl of the Image is pointing to it) and that page only diplays the image.

Before, you had the problem that the rest of page disappeared, now that problem won't occur anymore because that same content is now contained in the Image control.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rckrchAuthor Commented:
Thanks very much for that explanation.  I now understand what I am 'trying' to do from a 10,000 foot level.  Separate page and using the url for that page.

I do have another question now though.  This part of your command that you sent to me:    'Replace(Request.QueryString("id"), "'", "''"))'.  I don't know where this comes from.  Why not just use the parameterized queery with the DieNumber parameter to get to the correct image in the database?  By the way - the DieNumber is not the id (index) in the database.  It is another part identification used for other searches.

Thanks very much for the help!!!!!!!!!!!!!!!
0
rckrchAuthor Commented:
Thanks robert_schutt.  It works!!!  I have one last question.  How do I get the image to resize?  is there also a way to improve the image resolution?

Thanks very much for all your help!!
0
rckrchAuthor Commented:
Thanks very much for all the help.  Very informative and effective at resolving the issue I had.
0
Robert SchuttSoftware EngineerCommented:
Great!

The Replace command means that any single quote characters, that someone might add to the URL to get access to your data (called "SQL injection"), are defused so to speak. I usually add that command to anything that I put in a SQL statement string that could be tampered with. This is only a little base-level protection, much better is to use a parameterized command.

The code you posted earlier contains measurements in the image tag: Width="30%" and Height="50%". These determine the size of the image (relative to the size of the browser window!) and because the browser does the resizing, also partly the quality. If you need a specific size than it might be better to do that in the upload code, where you are already converting to jpeg format. If you want the original size then don't specify width/height in the image tag.
0
rckrchAuthor Commented:
Thanks again!!
0
rckrchAuthor Commented:
robert_schutt - I don't know if I reopen this question, but I ran into another problem.  The program below will work for the first entry in the database (top line), but will not pick the next one down.  I added another image for another dienumber and I get an error.  It says:

Conversion failed when converting the nvarchar value '2368.12' to data type int.

This is strange because the current dienumber for which the image is being retrieved is 2352.  It is as if the executescalar is ignoring the where clause in the sqlcommand.  During trouble shooting the QueryString in the routine below does show the correct dienumber (2352).

Can you help?

Thanks

Public Class GetImage
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Try
            Using dbconimg As New SqlConnection("Data Source=io....rd=cld")
                Using dbcmdimg As New SqlCommand("SELECT ProfileImage FROM PROFILEIMAGES WHERE DieNumber = " & Replace(Request.QueryString("id"), "'", "''"))
                    dbconimg.Open()
                    dbcmdimg.Connection = dbconimg

                    Dim imageData As Byte() = DirectCast(dbcmdimg.ExecuteScalar(), Byte())
                    Context.Response.Clear()
                    Context.Response.ContentType = "Image/jpeg"  '"image/jpeg"
                    Context.Response.BinaryWrite(imageData)
                    Context.Response.End()
                    dbcmdimg.Dispose()
                End Using
                dbconimg.Close()
                dbconimg.Dispose()
            End Using


        Catch ex As Exception
            ' show default image or error
        End Try
    End Sub

End Class
0
Robert SchuttSoftware EngineerCommented:
Without knowing more about your data it's hard to say what's happening. If you store a number other than integer in a varchar field, you have to start worrying about regional settings (decimal point or comma). Can you post your table create statement and some obfuscated (depersonalised) data?
0
rckrchAuthor Commented:
SubStatusCode      {"This operation requires IIS integrated pipeline mode."}      System.PlatformNotSupportedException

In the immediate window I got this from the error.  I don't know if this means anything or not relative to the table in the database.

I will give you the information from the table.
0
rckrchAuthor Commented:
Here is the table design window.  There realy isn't much information in the table except to lines with the columns you see here.  One with one DieNumber and one with a different one.
Imgtabledesign.png
0
rckrchAuthor Commented:
Changing the data type in the table to 'float' fixed the problem.  Thanks for putting the thought in my head.
0
Robert SchuttSoftware EngineerCommented:
ok, great! I was out for a bit and returned to find you solved it ;-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Visual Basic.NET

From novice to tech pro — start learning today.