Next.js Discord

Discord Forum

next 14 cannot see any images except favicon.ico in public folder.

Unanswered
Oriental chestnut gall wasp posted this in #help-forum
Open in Discord
Oriental chestnut gall waspOP
Tried both native html img tag and next next/image component, images with different extensions.
Here is a code sample:
import NextImage from 'next/image';
<NextImage
  src="/test.png"
  alt=""
  width="24"
  height="24"
/>


next.config.js:
/**
 * @type {import('next').NextConfig}
 */
module.exports = {};


You can find folder structure on the screenshot. Images are located directly in /public folder.

7 Replies

Sun bear
can you screenshot inside your app folder? there can be a problem if you are using a top level dynamic route since it will point to a page instead of image
@Sun bear can you screenshot inside your app folder? there can be a problem if you are using a top level dynamic route since it will point to a page instead of image
Oriental chestnut gall waspOP
Thanks for joining, xxxxx.
Yeah, I definitely think you are right. Now I have the same feeling nextjs admits I am requesting some page instead of the image. But cannot find how to fix it.
Sun bear
I would suggest you don't store anything in the public folder either way. Just make a repo on github called assets and put your images there and just reference them by a url.
Oriental chestnut gall waspOP
Do you mean I need to store all my images on a separate domain?
Sun bear
yes, in a github repo or your own bucket solution like aws or even a VPS.
Oriental chestnut gall waspOP
OK, thanks for the alternative 🙌
Oriental chestnut gall waspOP
it will cost additional effort, so currently I extended /src/middleware.ts with 
export const config = {
  matcher: [
    '/((?!api|static|.*\\..*|_next|favicon.ico|.*\\.png|.*\\.jpg|.*\\.svg).*)',
  ],
};

unfortunately I didn't manage to make it work like
.*\\.(png|jpg)