Image in frontmatter

Hi,

Thanks for this wonderful package ☺️

I was wondering if it’s possible to use mdx-bundler to parse relative image file references in frontmatter. It’s working perfectly for images in the mdx content itself but the images referenced in the frontmatter aren’t written to the output directory.

I would like to use the frontmatter to display a preview of the blog post in card format, including the banner.

Any guidance would be much appreciated!

• mdx-bundler version: 5.1.2
• node version: 14.15.4
• npm version: 7.20.0

Relevant code or config

---
title: My first blog post
date: "2021-07-22"
banner: "./images/banner.jpg"
---

const ROOT_PATH = process.cwd();
const PUBLIC_PATH = path.join(ROOT_PATH, "public");

const { code, frontmatter } = await bundleMDX(source, {
    cwd: directory,
    files,
    xdmOptions: (options) => {
      options.remarkPlugins = [
        ...(options.remarkPlugins ?? []),
        remarkMdxImages,
        gfm,
      ];

      return options;
    },
    esbuildOptions: (options) => {
      options.entryPoints = [getFilePath(directory)];
      options.outdir = path.join(PUBLIC_PATH, "images", type, slug);
      options.loader = {
        ...options.loader,
        ".webp": "file",
        ".png": "file",
        ".jpg": "file",
        ".jpeg": "file",
        ".gif": "file",
      };
      options.publicPath = `/images/${type}/${slug}`;
      options.write = true;

      return options;
    },
  });

What you did:

Ran bundleMDX in NextJS to bundle my MDX files.

What happened:

No error messages; the image file referenced in the frontmatter isn’t written to the outdir like the images in the content of the mdx file.

[deadcoder0904]

i went with this solution but would love an official way to do it from the frontmatter 👍

[jeffreyquan]

Thanks for sharing, @CanRau!

@deadcoder0904 and @city17, I haven’t implemented an optimal solution yet since I have not been blogging. I have created an images folder in my public directory and stored each image relevant to a blog post within a folder that has the slug of the blog post as the name of the folder and reference this in the frontmatter of the mdx files e.g.

---
title: My first blog post
date: "2021-07-22"
banner:   /images/blog/my-first-blog-post/banner.png
---

Other images referenced in the body of the mdx are copied to the same folder by mdx-bundler