上传到 S3 存储桶的新图像未在静态网站上加载

问题描述 投票:0回答:1

我正在使用一个存储桶来托管一个简单的静态网站,没有框架或任何东西。一切正常。但是,当我对网站进行一些更改(其中包括新图像)时,通过我的域名地址查看网站时,新图像拒绝加载。

目前,当通过 VS Code 通过实时服务器从我的本地计算机查看时,会加载新图像。我推送到网站的更改会推送到 Github,并且一个操作会将其全部推送到我的 S3 存储桶。这一切都正常,并且新图像在存储桶本身中显示得很好。 但是,当我访问实时网站时,图像无法加载,并且控制台显示 404 错误。

我验证了链接与其他图像相同(当然图像名称不同)

我验证了存储桶中的权限(它与所有其他图像位于同一文件夹中,但我还手动检查了该图像是否可读)

我清除了浏览器缓存并进行了硬重新加载并尝试了不同的浏览器。

我可以从存储桶中的图像属性打开图像的链接,一旦工作正常,我就可以从网址的开头(我使用自己的域)并且图像仍然加载。

我什至清除了我的 cloudflare 缓存。

但是我的网站似乎找不到它。

这是否只是 AWS 的一个问题,需要 AWS 时间来提供图像或在某个数据库中填充图像,或者它如何工作,或者我是否遗漏了一些基本的东西?

编辑: 请求的流程是它首先到达我的 cloudflare,并使用 CNAME 指向我的亚马逊存储桶,该存储桶以我的网站 www.jamesedens.me 命名 该存储桶被设置为托管静态网页,并且包含图像的文件夹被设置为对所有用户读取。 我在控制台中收到的确切错误只是一个通用的 404,但如果我查看响应,我会得到以下信息:

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: images/parking-winds-V2.PNG
RequestId: ZFGT3R0119AAKF4D
HostId: 1VkRxIkB2Egm4YtaaoOvzZGD02K3hxSYEtK6Ib/0zMV+EkOFEDgLi0/Hft00yOcIns4hVSUYUgs=
An Error Occurred While Attempting to Retrieve a Custom Error Document
Code: NoSuchKey
Message: The specified key does not exist.
Key: error.html

所以我假设是 S3 产生了错误。

有趣的是,如果我在 Chrome 开发者控制台的网络选项卡中双击有问题的图像,它将打开一个新选项卡并显示上述错误,然后如果我单击地址栏按 Enter 键,它将加载图像。我还可以复制地址栏中的图像完整地址并将其粘贴到不同的浏览器中,它也会加载。

amazon-web-services amazon-s3
1个回答
0
投票

当文件使用小写字母时,您在 URL 中使用大写字母。如果我使用 chrome 开发工具将代码更改为以下内容,它显示得很好。

<img src="images/parking-winds-v2.png" alt="Parking Winds" class="project-image">
© www.soinside.com 2019 - 2024. All rights reserved.