我有一些通过React.createElement
动态呈现内容的react 代码.因此,CSS是通过对象应用的.该动态生成中的元素可以具有指向公共AWS S3存储桶的背景图像.
似乎每次我的组件重新渲染时,都会再次从S3获取背景图像.这会延迟页面呈现.我在所有对象上设置了用于缓存控制的S3元数据.以下是背景图像加载的请求和响应标头-
响应标头-
Accept-Ranges: bytes
Cache-Control: public, max-age=604800
Content-Length: 52532
Content-Type: application/octet-stream
Date: Sun, 06 Feb 2022 05:57:32 GMT
ETag: "f29655808a5f80627d9ea7f44058a5e3"
Last-Modified: Sun, 06 Feb 2022 05:55:10 GMT
Server: AmazonS3
x-amz-meta-filetype: IMAGE
请求头-
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,hi;q=0.8
Cache-Control: no-cache
Connection: keep-alive
Host: <bucket-name>s3.amazonaws.com
Pragma: no-cache
Referer: https://<my-domain>.com/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36
我可以在"网络"选项卡中看到图像被多次加载,并且每次都显示数据传输.我做错了什么?有人能帮我找到根本原因吗.谢谢