How to bind Image with URL in Gridview - ASP.Net

Question

I have a image stored in database and it is displayed in Gridview. When i click the image it will pop up as zommed image. The issue here is image displayed in gridview increases the gridview column height, i decreased the height but the pop up stopped working correctly. so is it possible to bind the image with URL, i didn't know to work on it.

<asp:TemplateField HeaderText="Image">
                <ItemTemplate>
                    <asp:Image ID="Image1" runat="server"/>
                </ItemTemplate>
            </asp:TemplateField>

why don't you style that `` with `max-height` and `max-width` CSS properties? — balexandre, Mar 12 '20 at 10:46
@VDWWD i am not trying to change the image size, i just want to bind the image within the url — santosh, Mar 12 '20 at 10:55
@santosh then you have something weird in your code, CSS boundaries do not change image quality, only resizing... without seeing an example, I'm afraid I'm not of much help — balexandre, Mar 12 '20 at 11:04

score 0 · Answer 1 · answered Mar 12 '20 at 10:57

You should set your image size for exemple :

       <asp:TemplateField HeaderText="Image">
            <ItemTemplate>
                <asp:Image ID="Image1" runat="server" style="width:40px;height:50px;"/>
            </ItemTemplate>
        </asp:TemplateField>

If you use width and height properties, your image may lost the width-height ratio. You can set only width for exemple to keep the right width height rate.

Or you can use thumbnails for your grid. I mean, you can use a resized image to show in the grid and when you click on the image, you can pop up the real size image.

If the image is uploaded via your interface, at the moment of the saving the image on the server, you should redimension the image in order to save a thumbnail image.

To resize an image : How to resize an Image C#

Joel Dharansingh · Answer 2 · 2020-03-12T11:18:22.740

Try below block of code,

//Bind from db

 <asp:TemplateField HeaderText="Image">
        <ItemTemplate>
  <asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("ImageSrc") %>' style="width:40px;height:50px;"/>
          </ItemTemplate>
          </asp:TemplateField>

//Bind from local 

    <asp:TemplateField HeaderText="Image">
                <ItemTemplate>
          <asp:Image ID="Image1" runat="server" ImageUrl="../Images/ABC.jpg" style="width:40px;height:50px;"/>
                  </ItemTemplate>
                  </asp:TemplateField>

How to bind Image with URL in Gridview - ASP.Net

2 Answers2