使用JavaScript动态插入图片无法在302重定向的图片上工作

Question

我将使用jQuery动态地向HTML文档中插入图片。以下是代码：

var image_url = "http://www.kottke.org/plus/misc/images/castro-pitching.jpg";
var $image = $('<img src="'+image_url+'" width="50" height="50" />');
$('body').prepend($image);

请注意，图像http://www.kottke.org/plus/misc/images/castro-pitching.jpg实际上是一个302重定向到http://kottkegae.appspot.com/images/castro-pitching.jpg。

如果您在浏览器中访问原始图像，则可以正常工作。如果您加载包含该图像的HTML页面，则会正常加载。

但是，如果您使用jQuery（或JavaScript）动态插入它，则浏览器将不会显示302'ed图像。

如果您显示重定向的图像，则可以正常工作。

var image_url = "http://kottkegae.appspot.com/images/castro-pitching.jpg";
var $image2 = $('<img src="'+image_url+'" width="50" height="50" />');
$('body').prepend($image2);

这很疯狂，是吧？出了什么问题，我怎么能在动态插入时强制加载图像？

- Samuel Clay

Answer 1

事实证明，这在Firebug下有效的原因是该网站防止热链接。因此，在控制台中强制加载图像工作正常，但热链接无法正常工作。302重定向被浏览器正确跟随，即使对于图像也是如此。很难调试，因为在调试时它能够正常工作。哎。

- Samuel Clay

Answer 2

首先，我的答案仅适用于使用ASP.NET（C＃）的情况，但它可以很容易地移植到VB.NET，PHP或类似的语言中。

如果您在JavaScript中加载图像，它将只是看起来像死链接，并且在尝试加载它时会抛出错误。

我所做的是创建一个页面，接收查询字符串中图像的URL，读取图像并输出响应。

WebForm.aspx

<script type="text/javascript">
    $(document).ready(function () {
        var image_url = "http://www.kottke.org/plus/misc/images/castro-pitching.jpg";
        var $image = $('<img src=LoadImage.aspx?imageUrl="' + image_url + '" width="50" height="50" />');
        $('body').prepend($image);
    });
</script>

LoadImage.aspx（.cs Code-Behind）

using System;
using System.Net;

public partial class LoadImage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        String url = Server.UrlDecode(Request.QueryString["imageUrl"]).Replace("\"", "");
        WebRequest req = WebRequest.Create(url);
        System.Drawing.Image img = System.Drawing.Image.FromStream(req.GetResponse().GetResponseStream());

        Response.Clear();
        Response.ContentType = "image/jpeg";
        img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
    }
}

看起来成功地加载了图像并显示了它，包含了302重定向... 我不知道有什么办法可以在服务端不做任何工作的情况下完成这个操作。

如果您不能使用.NET，但可以使用其他语言，或者根本不能使用其他语言，请告诉我...

- dochoffiday

---

虽然这可能有效，但我需要一个客户端解决方案。如果我可以在服务器端完成所有处理，我可能会更倾向于页面导入和重新托管。这里有很多阻塞工作，这可能是禁止的，但这仍然是一个好答案。谢谢。 - Samuel Clay

Answer 3

直接分配图像URL不起作用，您必须首先在JavaScript中创建图像对象，请参见下面的示例：

var imgObj = new Image();
imgObj = " ---------- your path goes here----------";

现在，使用jQuery将imgObj.src属性分配给您的动态图像标签

- Chirag

---

这似乎不起作用。在尝试了这个解决方案后，我注意到如果通过Firebug查看图像并将其缓存，它会在页面上加载。尝试使用一堆图像（同时清除缓存），你会发现它不起作用。 - Samuel Clay