如何在中继器或网格控件中显示图像？答案

【问题标题】：How can I display an image in a repeater or grid control?如何在中继器或网格控件中显示图像？
【发布时间】：2009-11-12 19:01:45
【问题描述】：

我有大约 200 张图片要显示在一个页面上。

数据库只存储图片所在的路径。图像本身存储在应用程序的文件夹中。例如：d:/application/website/images/

我需要在显示缩略图时将原始尺寸图像转换为缩略图图像
是否有任何功能可以做到这一点？
理想情况下，显示将有 5 行和 5 列，然后使用分页来显示其余数据。

本质上，一个图片库：该应用在网格/中继器页面上显示一个缩略图，当用户单击该缩略图时，会打开一个新的弹出窗口，显示整个图像。我可以使用中继器控件来完成这项工作吗？

知道如何在中继器控件中显示缩略图。

有什么网站可以帮助我吗？

【问题讨论】：

标签： asp.net gridview repeater

【解决方案1】：

首先，我需要说的是，将缩略图存储在服务器上可能比这种解决方案更有效。此代码中的一些原则可用于在上传图像时创建这些缩略图。这可能是一个更好的方法。

话虽如此，这是一个可能的解决方案。这很快就被破解了，但它确实有效。我使用类似的东西从数据库中提供附件。新建一个ashx页面如下：

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        Bitmap b = new Bitmap(@"c:\temp\pictures\" + context.Request.QueryString["filename"]);

        Image i = b.GetThumbnailImage(48, 48, null, System.IntPtr.Zero);

        using (MemoryStream ms = new MemoryStream())
        {
            i.Save(ms, ImageFormat.Jpeg);
            context.Response.BinaryWrite(ms.ToArray());
        }

        context.Response.ContentType = "image/jpeg";
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

这将从查询字符串中找到名称传入的文件，并创建缩略图并使用内存流来显示图像。您显然必须针对路径、错误处理、确保 mime 类型正确等进行调整。

完成此操作后，您可以在转发器中使用此 URL（类似于 http://localhost/Handler.ashx?filename=myFirstImage）来生成缩略图。

【讨论】：

感谢重播，但我如何在转发器控件中绑定这个新创建的缩略图。是否有任何代码可以实现这一目标
在repeater 控件内部添加一个图像控件并将URL 设置为指向Handler.ashx 控件。您需要某种唯一标识符来标识您希望 Handler 将哪个图像制作成缩略图。
嘿，我尝试了所有的组合，如果你能写出很棒的代码的话，什么都不起作用

【解决方案2】：

我知道这篇文章现在已经很老了，但它仍然可能对任何人都有帮助。我有同样的问题并使用了这个编码。

配置文件

<add key="WebResources" value="~/Assets/WebResources/" />
<add key="ImageRoot" value="Images\Web" />
<add key="ProfileImages" value="Images\Profile" />

Asp.Net 数据列表

<asp:DataList ID="dlPrivateAlbum" runat="server" OnItemCommand="dlPublicAlbum_ItemCommand" RepeatDirection="Horizontal" RepeatLayout="Flow">
<ItemTemplate>
    <div class="boxgrid captionfull">
        <asp:Literal ID="lit_ImagePath" runat="server" Text='<%# Eval("URL") %>' Visible="false" />
        <asp:HyperLink runat="server" Target="_blank" ToolTip='<%#Eval("Description") %>' 
            ImageUrl='<%# ConfigurationManager.AppSettings["WebResources"] + ConfigurationManager.AppSettings["ProfileImages"] + @"\thumbs\" + Eval("URL") %>' 
            NavigateUrl='<%# ConfigurationManager.AppSettings["WebResources"] + ConfigurationManager.AppSettings["ProfileImages"] + @"\" + Eval("URL")  %>' />
        <div class="cover boxcaption">
            <asp:LinkButton ID="lnkbtn_Edit" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="edit" CssClass="captionlink" Text='<%#Eval("Title") %>' />
        </div>
    </div>
</ItemTemplate>

CSS：

.boxcaption{float:left;position:absolute;background:#000;height:70px;width:100%;opacity:.8;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"}
.captionfull .boxcaption{top:230px;left:0}
.caption .boxcaption{top:190px;left:0}
.captionlink:link, .captionlink:visited {color: #E2E2E2;text-decoration: none;}
.captionlink:hover { text-decoration: underline; }
.captionlink:active {color: #F5F5F5;}

后面的代码：

private void load(Guid userID)
{
    try
    {
        loadOptions();
        DbContext = new Entities();

        user = DbContext.UserProfiles.FirstOrDefault(d => d.UserID == userID);

        List<Album> albums = DbContext.Albums.Where(d => d.UserID == userID).ToList();

        if (albums != null)
        {
            dlPublicAlbum.DataSource = albums.FirstOrDefault(d => d.Type == "public").Images;
            dlPublicAlbum.DataBind();               
        }
    }
    catch (Exception ex)
    {
        Msg.ShowAlert(this.Parent.Page, Msg.GeneralError_Title + " " + ex.GetType().Name, ex.Message, MsgType.Error);
    }
}

【讨论】：