使用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重定向的圖像

回答

相關問題