Next.js Discord

Discord Forum

After upgrading to Next.js 16, images from /public no longer load

Unanswered
AM posted this in #help-forum
Open in Discord
AMOP
After updating to next@16.0.1, images from my /public folder stopped loading. I see these errors:

⨯ The requested resource isn't a valid image for /chains/arbitrum.png received null
⨯ The requested resource isn't a valid image for /chains/tac.png received null
⨯ The requested resource isn't a valid image for /chains/plasma.png received null


What could be causing this in Next.js 16, and how can I fix it?

15 Replies

@B33fb0n3 Can you share a screenshot of your fully expanded `/public` folder?
AMOP
yep here you go
and this is one of the images

<Image src='/chains/arbitrum.png' alt='Arbitrum' width={16} height={16} className={cn('h-4 w-4', className)} />

no problem at @15.1.4
AMOP
and when i load the url http://localhost:3000/chains/arbitrum.png -> it loads successfully 🤯
network tab is doing request to here

http://localhost:3000/_next/image?url=%2Fchains%2Fplasma.png&w=32&q=75


which returns ->

The requested resource isn't a valid image.
and thats the proxy

import { auth } from '@/auth';
import { NextResponse } from 'next/server';

export default auth((req) => {
  const isLoggedIn = !!req.auth;
  const isOnAuth = req.nextUrl.pathname.startsWith('/auth');

  if (isOnAuth) {
    if (isLoggedIn) {
      return NextResponse.redirect(new URL('/', req.nextUrl));
    }
    return NextResponse.next();
  }

  if (!isLoggedIn) {
    return NextResponse.redirect(new URL('/auth/login', req.nextUrl));
  }

  return NextResponse.next();
});

// Optionally configure proxy matcher
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};
AMOP
hmm i've updated it like so and now seems to work

import { auth } from '@/auth';
import { NextResponse } from 'next/server';

export default auth((req) => {
  const isLoggedIn = !!req.auth;
  const isOnAuth = req.nextUrl.pathname.startsWith('/auth');

  if (isOnAuth) {
    if (isLoggedIn) {
      return NextResponse.redirect(new URL('/', req.nextUrl));
    }
    return NextResponse.next();
  }

  if (!isLoggedIn) {
    return NextResponse.redirect(new URL('/auth/login', req.nextUrl));
  }

  return NextResponse.next();
});

// Configure middleware to exclude static files and Next.js internals
// In Next.js 16, middleware intercepts ALL requests by default, including static files
// This matcher excludes files with extensions (static assets) from middleware processing
export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - files with extensions (static assets like .png, .svg, etc.)
     */
    '/((?!api|_next/static|_next/image|favicon.ico|.*\\..*).*)',
  ],
};
@AM yep here you go
Cassin's Kingbird
if u can, its better to just import the image onto whichever component your using it on
import plasmaImg from "@/../public/chains/plasma.png";

...

<Image src={plasmaImg} alt="plasma" />
nextjs will automatically fill in the height & width during buildtime
thats nice hack for local assets
above was middleware or I should say proxy issue now 😄
@AM above was middleware or I should say proxy issue now 😄
Cassin's Kingbird
this should remove the proxy issue
and will also make the image loading more faster and optimized