Images seem to be broken

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

strapi / LaunchPad