Can't load png files in mdx with default bundler

[bitwhys]

✘ [ERROR] No loader is configured for ".png" files: planetaria-design-system.png

_mdx_bundler_entry_point-18d05a67-7c94-41ef-8d45-ce79186b1241.mdx:8:25:
  8 │ import designSystem from './planetaria-design-system.png';

[bitwhys]

From the contentlayer docs:

Contentlayer does not currently support image processing

Add support for importing images issue in contentlayer repo

[bitwhys]

Suggested solution

Lean on Framework

Some frameworks like Next.js come with the ability to process images on the server side, providing the optimal image based on the current viewport size. When the framework has this tooling available, you can often use images stored either locally or remotely.

---

Documentation

Working with Images

Image processing with Contentlayer is not currently supported, although we're planning on it. The current recommendation is to place images in the public directory, and then use a string field to store the path to that image.

Alternatively, you can store your images in an asset service like Cloudinary or Imgix. See here for more detail on our current recommendation for image processing.

Using next/image in Body Content

If you want to use next/image to render your images, create a component to wrap next/image and add the image via component markup in your markdown or MDX file.

For example, say we have an Image component in our project that wraps the next/image.

import NextImage from 'next/image'

const Image = (props) => {
  return <NextImage /* ... */ />
}

Your content should then call this component directly.

Other markdown content ...

<Image src="..." />

You can either use an .mdx file to have this content processed automatically, or you can use a tool like markdown-to-jsx with raw markdown.

[bitwhys]

commit 181c594 fixes this issue