如何在 Gridview 中将图像与 URL 绑定 - ASP.Net答案

【问题标题】：How to bind Image with URL in Gridview - ASP.Net如何在 Gridview 中将图像与 URL 绑定 - ASP.Net
【发布时间】：2020-03-12 10:36:19
【问题描述】：

我有一个图像存储在数据库中，它显示在 Gridview 中。当我单击图像时，它将弹出为 zommed 图像。这里的问题是gridview中显示的图像增加了gridview列的高度，我降低了高度，但弹出窗口停止正常工作。那么是否可以将图像与 URL 绑定，我不知道如何处理它。

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

【问题讨论】：

使用 url 不会改变图片大小....
为什么不用max-height 和max-width CSS 属性设置<asp:Image> 的样式？
@balexandre 这样设置会降低图像质量。
@VDWWD 我不想改变图像大小，我只是想在 url 中绑定图像
@santosh 那么你的代码中有一些奇怪的东西，CSS 边界不会改变图像质量，只会调整大小......没有看到一个例子，恐怕我没有多大帮助跨度>

标签： c# asp.net gridview

【解决方案1】：

例如，您应该设置图像大小：

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

如果您使用 width 和 height 属性，您的图像可能会丢失宽高比。例如，您可以仅设置宽度以保持正确的宽度高度率。

或者您可以为您的网格使用缩略图。我的意思是，您可以使用调整大小的图像在网格中显示，当您单击图像时，您可以弹出真实大小的图像。

如果图片是通过您的界面上传的，在将图片保存到服务器的那一刻，您应该重新调整图片尺寸，以便保存缩略图。

调整图像大小： How to resize an Image C#

【讨论】：

【解决方案2】：

试试下面的代码块，

//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>

【讨论】：