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

我使用jQuery动态地将图像插入到HTML文档中。下面是代码：使用JavaScript动态插入图像不适用于302重定向的图像

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'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);

这太疯狂了吧？什么给和如何动态插入时强制图像加载？

来源

2010-04-16 Samuel Clay

原来这个工程萤火下的原因是网站防止盗链。所以迫使图像加载在控制台中工作正常，但盗链无法正常工作。浏览器正确遵循302重定向，即使是图像。很难调试，因为它在调试时工作正常。哎呀。

来源

2011-01-27 04:30:35

首先，我的答案只有在使用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代码隐藏）

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，但可以用另一种语言，或者如果你不能使用任何其他语言的一切，让我知道...

来源

2010-04-16 05:42:02 dochoffiday

尽管这可能有效，但Im需要客户端解决方案。如果我可以在服务器端完成所有的处理，我可能会做更多的页面导入和重新创建。有很多阻塞工作在这里进行，这将是令人望而却步的，但它仍然是一个很好的答案。谢谢。 – 2010-04-19 14:19:57

直接分配图像URL不会工作，你必须做出第一图像对象在JavaScript见下图：

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

现在则imgObj.src属性分配给您的动态图像标签中的jQuery

来源

2010-04-16 07:01:08 Chirag

这似乎不起作用。在使用这个解决方案之后，我发现如果通过在Firebug中窥视它来以某种方式缓存图像，它将在页面上加载。尝试使用一堆图像（同时清除缓存），你会发现它不起作用。 – 2010-04-19 14:20:57

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

回答

相关问题