VS 内置 Web 服务器将图像作为八位字节流发送

Question

我正在使用 Visual Studio 2008 开发 Web 服务器调试一个包含大量 JavaScript 和图像的 ASP.NET 网站。

许多脚本之一尝试动态创建 标记，并为其提供适当的 src 属性。 但是，在 Firefox、IE 和 Opera 中，不会加载任何图像，而是显示替代文本。

进一步挖掘，我复制了一个图像链接，然后将其粘贴到 Firefox 的地址栏中，这就是实时标题窗口中出现的内容：

GET /images/nav/zoomin.png HTTP/1.1
Host: localhost:7777
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

HTTP/1.x 200 OK
Server: ASP.NET Development Server/9.0.0.0
Date: Wed, 25 Feb 2009 16:59:23 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: private
Content-Type: application/octet-stream
Content-Length: 292
Connection: Close

有问题的部分是 Content-Type 标头，它以某种方式设置为“application/octet-stream”强制执行下载操作，而不是在 标记内正常显示。

我很确定问题不是 javascript，因为它是从另一个运行良好的应用程序逐字复制的代码。

我相信我可能在某处配置错误。 但我可能是错的，所以这里是创建 HTML 标记的代码：

var zin = document.createElement("img");
zin = $Img.Png(zin, Settings.ImageHost + "zoomin.png");
zin.style.top = (this.y + zoomPaddingY) + "px";
zin.style.left = (this.x + zoomPaddingX) + "px";
zin.style.position = "absolute";
$Img.Swap(zin, Settings.ImageHost + "zoomin.png", Settings.ImageHost + "zoomin_active.png");
zin.alt = zin.title = "zoom in";
zin.style.cursor = this.hand;
$Evt.addListener(zin, "click", this.zoomIn, this, true);

// long long scroll ...

controlDiv.appendChild(zin);

$Img.Png 部分对于其他 PNG 图像工作正常，所以它不应该是问题的根源。

我做错了什么？！？

谢谢你的帮助！

现在已经是午夜了...而我仍在开发这个小应用程序...

Answer 1

您是否使用 GenericHandler 来渲染图像？

这样做似乎是一个简单的选择。

例如。

public class RenderImage : IHttpHandler, IReadOnlySessionState
{
  public void ProcessRequest(HttpContext context)
  {
     context.Response.ContentType = "image/png";
     context.Response.Clear();

    // TODO: Write image data
    Bitmap bitmap = ...

    bitmap.Save(Response.OutputStream,ImageFormat.Png);

    context.Response.End();
  }

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