Images not loading in NextJS 14 Headless WordPress demo fresh install

LunatikDev commented 9 months ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 20.11.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.1-canary.57 // Latest available version is detected (14.1.1-canary.57).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.9.5
Next.js Config:
  output: N/A

Which example does this report relate to?

cms-wordpress

What browser are you using? (if relevant)

Chrome 121.0.6167.185

How are you deploying your application? (if relevant)

Vercel, local

Describe the Bug

I tried to deploy "cms-wordpress" template on vercel.com and when you access the project website the images are not displaying.

I followed the steps exactly as shown here: ISR Blog with Next.js and WordPress

I did set the env variables when i deployed on Vercel and all of the data loads fine but the images are not working.

When run locally i get the following error : Error: Invalid src prop on next/image, hostname is not configured under images in your next.config.js

Expected Behavior

The expected behavior is that the images works out-of-the-box, below is how i fixed it:

The provided next.config.js is this: it doesn't work!
It should be changed to this: next.config.js Without the parameters:

swcMinify: true, optimizeFonts: true, minimumCacheTTL: 15000000

It will not work!

Also the hostname "secure.gravatar.com" should be added because profile avatars on latest wordpress are handled by gravatar !

To Reproduce

Follow tutorial ISR Blog with Next.js and WordPress
Try to deploy to Vercel.com, you will see that images are not showing.
Try to run localy with npm run dev,
Try to access website, an error will be thrown:

Error: Invalid src prop on next/image, hostname is not configured under images in your next.config.js

nikogenix commented 9 months ago

hi! just wanted to mention that in my case, i also had to add a secondary parameter for Gravatar on top of the changes that you made:

{
    protocol: "http",
    hostname: "2.gravatar.com",
}

sushilbansal commented 1 month ago

Hi @LunatikDev ,

how did you implement this step?

Create a bare minimum custom WordPress theme, consisting of only 2 files:

style.css
functions.php (see the bottom of this README) i created the theme but it is not installing. It is throwing this error:

Unpacking the package…

Installing the theme…

The package could not be installed. Template is missing. Standalone themes need to have a templates/index.html or index.php template file. Child themes need to have a Template header in the style.css stylesheet.

Theme installation failed.

vercel / next.js