"og:image" not working with firebase hosting

Question

I'm using Angular 17 with Firebase hosting for my website, but I'm having trouble setting an image as the og:image. I tried already various formats like JPEG and PNG, but the Facebook sharing debugger indicated that the image might have an invalid content type. When I uploaded the same image to cloud storage and used that URL as og:image, everything worked fine. This suggests that the issue might be with Firebase hosting. Has anyone encountered a similar problem and found a solution?

Here's how my firebase.json file looks:

{
 "hosting": [
    {
      "target": "app-name",
      "public": "dist/app-name/browser",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "headers": [
        {
          "source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=31536000,immutable"
            }
          ]
        },
        {
          "source": "/@(ngsw-worker.js|ngsw.json)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "no-cache"
            }
          ]
        }
      ],
      "rewrites": [
        {
          "source": "/en/**",
          "destination": "/en/index.html"
        },
        {
          "source": "/de/**",
          "destination": "/de/index.html"
        }
      ],
      "trailingSlash": false,
      "i18n": {
        "root": "/"
      }
    }
  ],
}