Images seem to be broken

[webhype]

Fix

I followed the setup instructions to a T but aren't getting images:

• production mode: No images visible / broken image icons (see screenshot)
• in dev mode:

1 of 1 error
Next.js (14.2.5) out of date (learn more)

Unhandled Runtime Error
Error: Invalid src prop (http://127.0.0.1:1337/uploads/logo_6a13c79c4b.png) on `next/image`, hostname "127.0.0.1" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Describe your request

In prod, it shows broken image icons in some corners as if there were something awesome that's missing there, and some places where I would expect at least a cute kitty image as a placeholder, there's merely an icon? (see screenshot)

In dev, I get the above-mentioned NextJS error.

Screenshots

What I tried myself:

cd next && yarn clean && yarn dev -> same result

Cause

The cause seems to be in next.config.mjs where only localhost is permitted but on my computer, for some reason, localhost "becomes" 127.0.0.1 as far as NextJS knows:

remotePatterns: [{ hostname: process.env.IMAGE_HOSTNAME || "localhost" }],

Workaround

The following edits to next/package.json seem to fix it temporarily:

    "dev": "IMAGE_HOSTNAME=127.0.0.1 next dev",
    "start": "IMAGE_HOSTNAME=127.0.0.1 next start",

Version information

Strapi version:

│ Time │ Tue Oct 01 2024 18:32:00 GMT-0400 (Eastern Dayl… │
│ Launched in │ 2768 ms │
│ Environment │ development │
│ Process PID │ 93239 │
│ Version │ 5.0.0 (node v18.20.4) │
│ Edition │ Community │
│ Database │ sqlite

Mac OS 13.6 (Ventura), M2

[Mcastres]

Hello @webhype 👋

What do you define as production mode here exactly?