@baldifilippo Thank you for reaching out to the Vercel community.

image is located at /public/images/project-image.jpg in your project structure. The /public folder is the default static file serving folder in Next.js .

For example, the file public/avatars/me.png can be viewed by visiting the /avatars/me.png path.

Place your image in the /public/images/ directory of your project.

Adjust the src path if your image has a different name or location within the public folder.

Moreover for mdx

Configure your next.config.js to use MDX:

1
const withMDX = require('@next/mdx')()
2

3
module.exports = withMDX({
4
  pageExtensions: ['js', 'jsx', 'mdx'],
5
})

For static images:

1
import Image from 'next/image'
2

3
<Image src="/images/profile.jpg" alt="Profile picture" width={300} height={300} />

If you are loading from some wethjird party storage or cloud

1
<Image src="https://example.com/remote-image.jpg" alt="Remote image" width={500} height={300} />

Give it a try and let us know if it helps. This might not be the exact solution but you can take reference from it.