Sometimes I see very strange behavior of the combination Digital Ocean Spaces with NextJS 13. Some images do not load when the page is first opened,get error 403 "url parameter is valid but upstream is invalid" but they ALWAYS load normally at once if you do Reload (F5). Working with the same storage from another application written in React never causes problems.

My NextJS component:
const image = {
id: 1,
url: "https://fra1.digitaloceanspaces.com/XXX/media/cache/a8/8e/a88e67f5f79955424ef0279ede3ec1f2.jpg
?AWSAccessKeyId=DO00WDRQ97F&Signature=%2FBfollO83%2F5ZKCCQHsUSoWuXea8%3D&Expires=1710233641"}
<Image
src={image.url}
alt={"image"}
fill
/>
my next.config.mjs
const nextConfig = {
images: {
domains: ["fra1.digitaloceanspaces.com"],
remotePatterns: [
{
protocol: "https",
hostname: "fra1.digitaloceanspaces.com",
port: "",
},
],
},
I tried to add onError event handler:
<Image
src={image.url}
alt={"image"}
fill
onError={(e) => {
((e.target as HTMLImageElement).src = image.url)
}
/>
At first it seemed that it helped, but then it led to an endless error.
do you think, is this a Digital Ocean problem? Is there some way to fix it with NextJS?
