Next.js Discord

Discord Forum

Images in Public Folder Not Found After Deployment

Unanswered
VoidPointer posted this in #help-forum
Open in Discord
VoidPointerOP
My Nextjs app is based on the TailAdmin template for a Tailwind based admin dashboard. I deployed the basic app to Firebase app hosting, with a very simple config because I use no Firebase resources except this backend, and all looked good. Then I changed the folder structure in public, deleting old images and adding my own, and set the new image urls in the app sidebare and merged to main, causing an automatic deployment on Firebase, but now the images give a 404 on the "live" site in Firebase.

Image files are like:
public
 - graphics
  - logo-black.png
  - logo-white.png

and urls on a next/image are like:
src="/graphics/logo-black.png"
src="/graphics/logo-white.png"


All I could think of checking was that the images made it to the main branch via my PR, and they did. What else can I check?

7 Replies

RxvxntxN
Hello , Have you tried to import and use with next/image ?
@RxvxntxN Hello , Have you tried to import and use with next/image ?
VoidPointerOP
I am using next/image, inside a next/link, like this:
        <Link href="/">
          <Image
            className="dark:hidden"
            src="/graphics/logo-black.png"
            alt="Logo"
            width={150}
            height={40}
          />
          <Image
            className="hidden dark:block"
            src="/graphics/logo-white.png"
            alt="Logo"
            width={150}
            height={40}
          />
        </Link>
RxvxntxN
I know it , i am asking if you can import like import logoBlack from '@/public/graphics/logo-black.png';

and use src={logoBlack} inside next/image , would you still get same issue ?
VoidPointerOP
Oh, sorry, I'll try and report back.
VoidPointerOP
That also only works locally, thanks.
RxvxntxN
did you delete old files and add new ones in the same path ?
RxvxntxN
may be try Clean Build and build it again