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。

如果您要在浏览器中转到原始图像，它可以正常工作。如果您要在img标记中加载包含该图片的HTML页面，则会加载正常。

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

如果您显示重定向的图像，它将正常工作。

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

那太疯狂吧？什么给出以及如何在动态插入时强制图像加载？

Answer 1

原来在Firebug下运行的原因是该网站阻止了热链接。因此强制图像在控制台中加载工作正常，但热链接不起作用。浏览器正确地遵循302重定向，即使对于图像也是如此。很难调试，因为它在调试时工作正常。哎呀。

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，但可以使用其他语言，或者你根本不能使用任何其他语言，请告诉我......

Answer 3

直接指定图片网址无法正常工作，您必须在javascript中制作第一个图片对象，如下所示：

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

现在将imgObj.src属性分配给jquery

中的动态图像标记

使用JavaScript动态插入图像不适用于302重定向的图像

3 个答案: