jQuery的彩盒顯示的是亞馬遜的S3圖像的二進制，而不是實際的圖像

Question

我在用的彩盒

http://www.jacklmoore.com/colorbox/

只是想一個簡單的例子，以獲得從S3加載圖像時選擇的縮略圖

例HTML：

<a class="fpg" href="https://s3.amazonaws.com/bucket/image" ><img src="https://s3.amazonaws.com/bucket/image" /></a> 

JavaScript示例：

$(".fpg").colorbox({ rel:'fpg',current:false}); 

縮略圖加載正常。但是當我點擊一個拇指和彩盒開始加載真正的S3圖像時，我得到了這個錯誤。

No 'Access-Control-Allow-Origin' header is present on the requested resource. 

我在本地服務器上運行它。

所以我改變了S3桶的CROS配置爲默認

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>GET</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>Authorization</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

現在，當我在顏色框加載圖像，它只是加載了一大堆二進制的。我可以看到PNG IHDR，我認爲它是二進制文件的一部分。

有誰知道如何正確加載S3映像？

感謝

Answer 1

我想這是較晚，但今天我也有類似的問題，我通過使用HTML屬性， 添加設置這樣解決：

html:'<img src="'+$(this).attr('href')+'">' 

建設顏色框時。

你只是告訴與HTML填補了預覽，當然你需要讓你想申請顏色框來結束了做這樣的事情

$('.classIwantToApplyColorboxTo').each(function(){ 
$(this).colorbox({ 
html:'<img src="'+$(this).attr('href')+'">' 
       }); 
}); 

這招可以解決甚至XMLHttpRequest的錯誤參考。