displaying image from db

[sam1]

hi,

I am going through this tutorial and i am stuck, here is my problem i can read the images from the db but it displays the same image(the first image inserted).

here is the code:

<script runat="server">
                        Public Sub Page_Load(sender As Object, e As EventArgs)
                                    ' Create Instance of Connection and Command Object      
            Dim myConnection As New SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString)
                                    Dim myCommand As New SqlCommand("Select * from Person", myConnection)
                                    Try
                                                myConnection.Open()
                                                Dim myDataReader as SqlDataReader
                                                myDataReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
                                                Do While (myDataReader.Read())
                                                            Response.ContentType = myDataReader.Item("PersonImageType")
                                                            Response.BinaryWrite(myDataReader.Item("PersonImage"))
                                                Loop
                                                myConnection.Close()
                                                Response.Write("Person info successfully retrieved!")
                                    Catch SQLexc As SqlException
                                                Response.Write("Read Failed : " & SQLexc.ToString())
                                    End Try
                        End Sub  
    </script>

then i got a function:

Function FormatURL(ByVal strArgument) As String

            Return ("readrealimage.aspx?id=" & strArgument)

        End Function

which i call in my gridview:

<asp:TemplateColumn HeaderText="Image">

                                                <ItemTemplate>

                                                            <asp:Image ID="Image1"

                                                                        Width="150" Height="125"

                                                                        ImageUrl='<%#FormatURL(DataBinder.Eval(Container.DataItem, "PersonID")) %>'

                                                                        Runat=server />

any help would be appreciated.

thanks

[SheSaidImaPregy]

you are never binding the information anywhere? by calling the function, you should have bound your information to your datagrid. That's what you're missing.

[sam1]

can you show me how to do it as i am new in .net :)

[sam1]

btw i have if statement for postback in pageload:

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

            If Not Page.IsPostBack Then

                BindGrid()

            End If

        End Sub

[SheSaidImaPregy]

http://authors.aspalliance.com/das/datagridimages.html

This might be where you got it from? i just did a search for the readrealimage.aspx and templatecolumn. Follow his example.

[sam1]

yea that is the tutorial i am trying right now i have copied and pasted exact code but still it shows same picture for all rows

[SheSaidImaPregy]

Well for one, it was stupid to put it that way unless you are going to change the page's name a lot. Instead of using a function, just place this:

ImageUrl='readrealimage.aspx?id=<%# DataBinder.Eval(Container.DataItem, "PersonID") %>

Why makea function that just add's static text? anyway.. :)

Make sure you have more than one record in the database, and that you have different photos with different ID's. Which I am sure you do.

I am not sure exactly why you're doing it this way.. personally I think you should set up a image resize function that saves the image to a folder with the id of your Person. Then just call it on the page like you were. Where are your images, in a database?

[sam1]

Hi thanks for your help.

I have done the resizing and saving of the image to a folder but i am not quite sure how to display it in another page(as you said).

yes the pictures are saved in the database and i was just trying to learn how to retrieve images and save images to database :)

[SheSaidImaPregy]

Well, try to avoid saving images to a database, as it eats up reasources trying to display them and is very slow. Anyway, if you name the images something easy like the Person's ID or something, then you can just reference it in by using <img src="/imagespath/<%# DataBinder.Eval(Container.DataItem, "PersonID") %>.jpg" />
This just puts out the person's id. If you person's id is 2123 and your photo id is 2123, then by just spitting out the person's id, you will reference in the photo. If you would like a resizing function for your uploaded photos, just let me know. When a user will upload their photo, the resizing function will be called and saved to a location that you choose with the appropriate name. Then when you call it from another page, just put the path in the img src with the reference to the person's id. That way it will automatically be spit out and you have nothing to worry about database wise except for the users info.

[sam1]

Hi,

Thanks for your help, yea it would be great if you show me a resizing function as well as how to call the image from the file.

thanks

[SheSaidImaPregy]

'' resize uploaded pictures into thumbnails.
Function generateThumbnail(ByVal newWidth As Integer, ByVal strFileName As String)
  Dim bmp as Bitmap
  Dim newHeight as Integer
  Dim resized as Bitmap
  Dim filePath As String = Server.MapPath("/")
  'now Server.MapPath("/") just points to your root. Find your folder that you wish to save to
  'Much like "www.domain.com/users/images/" -> Server.MapPath("/users/images/")
  bmp = System.Drawing.Image.FromFile(filePath & "TEMP_" & strFileName)
  newHeight = (newWidth/bmp.width)*bmp.Height
  resized = new Bitmap(newWidth,newHeight)
  Dim g as Graphics = Graphics.FromImage(resized)
  g.SmoothingMode = SmoothingMode.HighQuality
  g.CompositingQuality = CompositingQuality.HighQuality
  g.InterpolationMode = InterpolationMode.High
  g.DrawImage(bmp, new Rectangle(0,0,resized.Width,resized.Height),0,0,bmp.Width,bmp.Height,GraphicsUnit.Pixel)
  g.Dispose()
  resized.Save((filePath & strFileName),ImageFormat.Jpeg)
  bmp.dispose()
  if File.Exists(filePath & "TEMP_" & strFileName) then File.delete(filePath & "TEMP_" & strFileName)
End Function

Now this code uses two values for you. A size for the width of the thumbnail you wish and the id you wish to name the thumbnail, which this should be your PersonID or UserID. Now keep in mind, this ONLY TAKES JPEG images. It will not work with a gif, png, or the like. It must be jpeg or you will have an error.

To use the above function, you need to grab your uploaded file and save it to your directory as "TEMP_" & PersonID. After you saved it, call the generateThumbnail(sizeyouwishinpixels, PersonID). After you call this function, it will delete your TEMP picture.

Now your picture has been resized and saved with your PersonID. Now to call this, just put it down like the following:

<img src="/FilePathYouChoseInResizeFunction/<%# DataBinder.Eval(Container.DataItem, "PersonID") %>.jpg" alt="" />