Next.JS 13 image loading error 403 from DIgital Ocean Spaces

61 views Asked by At

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.

enter image description here

enter image description here

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?

0

There are 0 answers