How to show an image in the gridview?

Question

0.00/5 (No votes)

See more:

I have stored my image in the database in the form of a base64 string. Now I want to show this image in my gridview without converting the the string back to image. I'm using the following code but it doesn't show my image.

XML

<asp:GridView ID="gvList" runat="server" AutoGenerateColumns="false" ShowHeaderWhenEmpty="true"
                                HeaderStyle-CssClass="GridView_Header" RowStyle-CssClass="GridView_Row"
                                AlternatingRowStyle-CssClass="GridView_AlterRow" Style="width: 95%; height: 100%; table-layout: fixed; grid-row-sizing: 60px; overflow: scroll; vertical-align: top" OnRowDataBound="gvList_RowDataBound">
                                <Columns>
                                    <asp:BoundField DataField="BioDataID" HeaderText="Sr. No" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />
                                    <asp:BoundField DataField="d1" HeaderText="District" />
                                    <asp:BoundField DataField="d2" HeaderText="Tehsil" />
                                    <asp:BoundField DataField="d3" HeaderText="Police Station" />
                                    <asp:BoundField DataField="CNIC" HeaderText="CNIC" />
                                    <asp:BoundField DataField="Name" HeaderText="Name" />
                                    <asp:BoundField DataField="TemporaryAddress" HeaderText="Address" />
                                    <asp:BoundField DataField="Age" HeaderText="Age" />
                                    <%--<asp:BoundField DataField="YearOfBirth" HeaderText="Year Of Birth" />--%>
                                    <asp:TemplateField>
                                        <HeaderTemplate>Image</HeaderTemplate>
                                        <ItemTemplate>
                                            <img src='<%# Eval("ImagePath") %>' alt="image" height="100" width="200" />
                                        </ItemTemplate>
                                    </asp:TemplateField>


                                    <%--<asp:ImageField DataImageUrlField="ImagePath"
                                        DataImageUrlFormatString='<%# Eval("ImagePath") %>'
                                        AlternateText="Employee Photo"
                                        NullDisplayText="No image on file."
                                        HeaderText="Photo"
                                        ReadOnly="true" />--%>
                                </Columns>
                                <EmptyDataTemplate>
                                    <table width="100%" border="0">
                                        <tr class="GridView_Row">
                                            <td colspan="4" style="font-size: 16; font-weight: bold; color: Red; text-align: center;">No Records Found!
                                            </td>
                                        </tr>
                                    </table>

                                </EmptyDataTemplate>
                            </asp:GridView>

Posted 19-Aug-15 23:45pm

Rida Iftikhar

Add a Solution

5 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**D V L** · Answer 1 · 2015-08-20T00:24:00

Solution 5

Follow the link

http://www.aspsnippets.com/Articles/Display-image-from-database-in-Image-control-without-using-Generic-Handler-in-ASPNet.aspx[^]

Posted 20-Aug-15 0:24am

D V L

Abhishek Kumar Goswami · Answer 2 · 2015-08-19T23:58:00

Solution 2

If manipulating in code below code , you can use

public Image Base64ToImage(string base64String)
{
// Convert Base64 String to byte[]
byte[] imageBytes = Convert.FromBase64String(base64String);
MemoryStream ms = new MemoryStream(imageBytes, 0,imageBytes.Length);

// Convert byte[] to Image
ms.Write(imageBytes, 0, imageBytes.Length);
Image image = Image.FromStream(ms, true);
return image;
}

or if you are using in webpage use direct

Posted 19-Aug-15 23:58pm

Abhishek Kumar Goswami

Comments

Rida Iftikhar 20-Aug-15 6:52am

Won't i have to use rowdatabound event for this to work?? I was actually trying not to use this solution. Is there any way I won't have to first convert the string back to the image?

Member 13544857 11-Jan-18 13:03pm

i tried this code but the return type is image so i cant able to get the code for bind this image into grid view. but i got code to save the retrieved image in a local folder using server path. and then i can able to show in picture box.
My question is how cant i show the retrieved image in gridview? help me with this sir.

ChauhanAjay · Answer 3 · 2015-08-19T23:57:00

Solution 1

Please go through the below link
Displaying Images from a Database in a GridView[^]

Posted 19-Aug-15 23:57pm

ChauhanAjay

Abhinav S · Answer 4 · 2015-08-19T23:59:00

Solution 3

Displaying images -
GridView Examples for ASP.NET 2.0: Displaying Images in a GridView Column[^]
[ASP.NET Programming]
Show Image in GridView Using ASP.NET[^]
Display photo in Grid View[^]

Posted 19-Aug-15 23:59pm

Abhinav S

Sriram Mani · Answer 5 · 2015-08-20T00:03:00

Hi there.

I don't think it is possible to display an image straight away from a string unless it is a Image URL where the filename and path is stored as an URL.

You could try to decode the base64 string into the required format as suggested in the below link.
http://stackoverflow.com/questions/5083336/decoding-base64-image[^]

I alternatively suggest you to use the image filepath to be stored in DB where in the image is placed at some defined location. This reduces the weightage of your database.

Hope this helps.