How to import local images?

[graup]

Hi! First of all, thanks for this effort. This bring me one step closer to a nice and simple setup. What I really want is a single [slug]/page.tsx and articles as mdx files that can load local images (like ![alt text](./image.jpg)). I don't want to move images to the public folder, that seems like an ugly, not portable hack.

Does anyone know how to do that? I tried this (using MDXRemote from next-mdx-remote-client/rsc) but it gives me import errors.

// article.mdx
import imgUrl from "./image.jpg";

<img src={imgUrl} />

Error: Unknown file extension ".jpg" for /path/to/image.jpg

I tried tinkering with the nextjs webpack config but it doesn't seem to do anything (also Nextjs already can load images like this out of the box.) It seems the MDX evaluation doesn't go through webpack?

(If this would work, we could automatically turn ![alt text](./image.jpg) into that code using rehype-mdx-import-media.)

[talatkuyuk]

Do you use pages router or app router in nextjs? Import doesn't work in pages router in mdx files.