3

I am using the new next/image component to load avatar images from digitaloceanspaces as follow:

import Image from "next/image";

...

<Image
   layout="fill"
   quality={1}
   loader={avatarLoader}
   src="839e7be6-1d2d-4164-bd33-befc3a7613c6_1610115441"
/>

The loader looks like this:

export const avatarLoader = ({ src, width, quality }: ImageLoaderProps) => {
  return `https://donout.ams3.digitaloceanspaces.com/${src}?w=${width}&q=${quality || 75}`;
};

But It's not caching it. And I try adding it on my next.config

module.exports = {
  async headers() {
    return [
      {
        source: "https://donout.ams3.digitaloceanspaces.com/*",
        headers: [
          {
            key: "Cache-Control",
            value:
              "public, max-age=31536000, s-maxage=31536000, stale-while-revalidate",
          },
        ],
      },
    ];
  },
};

But nothing is working. Can anyone tell me how to cache images from remotes urls?

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
coolbeatz71
  • 928
  • 2
  • 10
  • 22
  • 1
    Just want to point out that the `headers()` function in the config can only be used for paths that are served by the Next.js app, not external ones. Caching for those would be configured by the service that serves them. – juliomalves Jan 22 '21 at 22:27

0 Answers0