Hello,
I’m developing a personal blog using the “Portfolio Starter Kit” template, and I’m experiencing an issue with loading images in an .mdx file. When I try to insert an image using the following structure:
<img src="/images/alarm.png" alt="alarm photo" />
the image does not load as expected.
I suspect the problem might be related to the image path, as I was able to successfully load an image by using a URL from the web instead of the local path.
Could you please help me understand how to properly load an image located within a project folder?
I am attaching the project structure for reference.
Thank you!
@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:
const withMDX = require('@next/mdx')()
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'mdx'],
})
For static images:
import Image from 'next/image'
<Image src="/images/profile.jpg" alt="Profile picture" width={300} height={300} />
If you are loading from some wethjird party storage or cloud 
<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.
