Next.js Discord

Discord Forum

Images not loading with Headers

Answered
julian posted this in #help-forum
Open in Discord
julianOP
So, I'm using FFmpeg-wasm, and had to set two headers to get it to work.

But not my Images from the database won't load up. They're stored as links in the db.

Here is the next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
    async headers() {
      return [
        {
          source: "/(.*)",
          headers: [
            {
              key: "Cross-Origin-Embedder-Policy",
              value: "require-corp",
            },
            {
              key: "Cross-Origin-Opener-Policy",
              value: "same-origin",
            },
          ],
        },
      ];
    },
  };

module.exports = nextConfig
Answered by julian
Solved the issue by setting the source to the page that needed those headers. So instead of /(.*) I set it to /meetings, because that’s the page I needed the headers.
View full answer

4 Replies

julianOP
Here is the image. It's also the correct url when I look at Inspect Elements
julianOP
Found out the issue:
CORS, it doesn't allow external urls.. Is there any solution to allow external urls too?
julianOP
Solved the issue by setting the source to the page that needed those headers. So instead of /(.*) I set it to /meetings, because that’s the page I needed the headers.
Answer