Jquery Colorbox显示的是AmazonS3图像的二进制值，而不是实际图像

Jquery Colorbox is displaying binary of Amazon S3 image instead of actual image

本文关键字：图像 Colorbox AmazonS3 Jquery 二进制 显示      更新时间：2023-09-26

我正在使用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 bucket的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>

现在，当我在colorbox中加载图像时，它只加载了一大堆二进制文件。我可以看到PNG IHDR，我想它是二进制文件的一部分。

有人知道如何正确加载S3映像吗？

感谢

我想已经晚了，但今天我遇到了类似的问题，我使用html属性解决了这个问题，添加这样的设置：

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

构建色盒时。

你只是告诉用html填充预览，当然你需要保留你想应用colorbox的引用，以完成类似的操作

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

这个技巧甚至可以解决XMLHttpRequest错误。

相关文章：