How to insert an image in MDX file

To insert an image in an MDX format article in Next.js using Contentlayer, use the standard Markdown image syntax.

![Alt text for the image](/path/to/your/image.jpg)

Replace /path/to/your/image.jpg with the actual path to an image file, and adjust the caption text accordingly. This structure provides a semantic way to include an image with its caption in your MDX document.

Use the standard HTML syntax for image captions. Wrap your image and its caption in a <figcaption> element, and use the <figcaption> element to provide the caption.

Adjust the dimensions (height and width) of the image in Markdown by using HTML attributes within the <img> tag.

Example Code:

<figure> <img src="/path/to/your/image.jpg" alt="Alt text for the image" width="500" height="300" /> <figcaption> Caption for your image.</figcaption> </figure>

Adjust the values to your preferred dimensions. It's important to maintain the aspect ratio of the image to prevent distortion. If you set only one of width or height, the browser will automatically adjust the other dimension to maintain the aspect ratio.

Remember to replace /path/to/your/image.jpg with the actual path to your image file, and customize the caption accordingly.

GlenH - Nov 12, 2023gghayoge at gmail.com