使用 jQuery 显示 ashx 图像？答案

【问题标题】：Display an ashx image using jQuery?使用 jQuery 显示 ashx 图像？
【发布时间】：2010-12-30 04:44:18
【问题描述】：

我一直在尝试使用 jQuery 插件 Colorbox 通过 ashx 文件显示我在数据库中的图像。不幸的是，它只是在页面顶部吐出一堆乱码，没有图像。这可以做到吗？这是我目前所拥有的：

   $(document).ready
   (
       function () 
       {
           $("a[rel='cbImg']").colorbox(); 
       }
   );
...
<a rel="cbImg" href="HuntImage.ashx?id=15">Click to see image</a>

更新：

我的 ashx 文件正在写入二进制文件：

            context.Response.ContentType = "image/bmp";
            context.Response.BinaryWrite(ba);

【问题讨论】：

你的 ashx 返回图像或二进制图像的 URL 是什么？
如果是二进制文件，我想你会希望处理程序获得图像的实际 src。
ashx 为图像写入二进制文件。 @Stefan，你能扩展一下吗？
我的意思是，如果你的处理程序的响应是图像的二进制文件，就像你说的那样。这将是您的 img 标签的 src。但是，如果 colorbox 不使用图像标签。我的建议对你没有帮助。

标签： asp.net jquery colorbox

【解决方案1】：

Colorbox 有一个选项“照片”。如果您在构造函数中将此设置为 true，那么它将强制它渲染照片。

$(target).colorbox({photo: true});

【讨论】：

有意思，我看看这个。
@Abe：我的处理程序对我有用。我使用 /image.axd 作为我的网址，但我不明白为什么它不适合你。顺便说一句，我的彩盒版本是 1.3.16，您可能想要升级...

【解决方案2】：

您应该在客户端设置 src 属性。

<img src="HuntImage.ashx?id=15" ..../>

处理程序

public class ImageRequestHandler: IHttpHandler, IRequiresSessionState
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.Clear();

            if(context.Request.QueryString.Count != 0)
            {
        //Get the stored image and write in the response.
                var storedImage = context.Session[_Default.STORED_IMAGE] as byte[];
                if (storedImage != null)
                {
                    Image image = GetImage(storedImage);
                    if (image != null)
                    {
                        context.Response.ContentType = "image/jpeg";
                        image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
                    }
                }
            }
        }

        private Image GetImage(byte[] storedImage)
        {
            var stream = new MemoryStream(storedImage);
            return Image.FromStream(stream);
        }

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

【讨论】：

我不太明白你的意思。可以举个例子吗？
@Abe Miessler：编辑了答案。
@Cybernate：img src可以设置客户端的onclick事件。然后图像将加载。
OP 正在使用 colorbox 插件，你能举例说明一下吗？
好吧，我没有得到胡言乱语，但它现在什么都没有显示。

【解决方案3】：

似乎我无法使用带有 ashx 图像的 colorbox 进行尝试。如果有人找到方法，请在此处发布。

我考虑过删除问题，但我会保留它，以防其他人遇到同样的问题。

【讨论】：

看看 James South 的回答，它恰到好处！

【解决方案4】：

在第 124 行附近找到这个函数（颜色框 1.3.15）

// Checks an href to see if it is a photo.
// There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
function isImage(url) {
    return settings.photo || /\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(\.*))?$/i.test(url);
}

// Checks an href to see if it is a photo.
// There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
function isImage(url) {
    return settings.photo || /\.(gif|png|jpg|jpeg|bmp|ashx)(?:\?([^#]*))?(?:#(\.*))?$/i.test(url);
}

这在 Sitecore 6.2 中对我来说很好用 :)

【讨论】：

非常有趣。我会试一试，然后告诉你进展如何。