typescript - NextJS bildoptimering fungerar inte i produktion på Vercel

För närvarande arbetar jag på en NextJS-applikation. Min applikation kommer att distribueras med flera domäner på Vercel. Applikationen ska rendera bilder dynamiskt. Alla bilder renderas korrekt i förhandsgranskningsmiljön på Vercel, men när jag distribuerar applikationen i produktionsmiljön är svaret för den optimerade bilden: Bad request INVALID_IMAGE_OPTIMIZE_REQUEST

Om jag begär den ursprungliga (ooptimerade) bilden fungerar allt som förväntat. Jag använder den senaste versionen av NextJS (14.0.4)

Jag har försökt använda flera olika konfigurationer för NextJS (config.nextjs.mjs). Jag har också försökt begära olika bilder manuellt (original och optimerade).

Min nuvarande next.config.mjs ser ut så här

images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
        {
            hostname: 'domain1.example.com',
        },
        {
            hostname: 'domain2.example.com',
        },
    ],
},

Min bild-URL till exempel är /api/images/some-image-uuid För att ladda optimerade bilder använder jag NextJS Image-komponenten från next/image.

Svar #1

Din nästa konfiguration kan saknas. Jag föreslår att du lägger till protokoll och port samt andra egenskaper om det behövs. Här är dokumentationen

Du kan också behöva lägga till domän i image-objektet. Här är problemet

images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "openweathermap.org",
        port: "",
      },
    ],
  },

Svar #2

I mitt fall hade jag flyttat mina bilder till en annan s3-bucket men glömde att återspegla den förändringen i mina produktionsmiljövariabler.

Det tog mig timmar av grävande, men när jag bytte miljövariabeln började mina bilder visas igen.