Issue with Loading Local Images in .mdx Files – Portfolio Starter Kit

[baldifilippo]

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!

[neerajkumar61]

@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.