Output images are corrupted

[tconroy]

mdx-bundler version: 9.0.1 node version: v17.8.0 npm version: 8.5.5

I am using mdx-bundler + remark-mdx-images to output images with mdx blog posts.

I am running into an issue where the input image is valid, but the output image appears to be corrupt (i.e is not visible in browser, and I get this error message from macos Preview when trying to open it):

MDX file:

![](./hello-world.png 'Hello World')

const { code, frontmatter } = await bundleMDX({
  source: indexFile.content,
  files: filesObject,
  mdxOptions: options => ({
    remarkPlugins: [
      ...(options.remarkPlugins ?? []),
      remarkSlug,
      remarkMdxImages,
      remarkGfm,
    ],
    rehypePlugins: [
      ...(options.rehypePlugins ?? []),
      [rehypeAutolinkHeadings, { behavior: 'wrap' }],
      [rehypePrettyCode, rehypePrettyCodeOptions],
    ],
  }),
  esbuildOptions: options => {
    options.loader = {
      ...options.loader,
      '.gif': 'file',
      '.jpeg': 'file',
      '.jpg': 'file',
      '.png': 'file',
      '.svg': 'file',
      '.webp': 'file',
    }

    const basePath = path.resolve(`/build/_assets/${rootDir}/img`)
    options.outdir = path.resolve(`public/${basePath}`)
    options.publicPath = basePath

    // Set write to true so that esbuild will output the files.
    options.write = true

    return options
  },
})

Correctly copied to output dir:

Trying to view it in browser (returns 200 but file isn't visible):

Visiting the file URL directly:

[phongsakornp]

I had the same problem. I fix it by defining the current working directory (cwd).

const { code, frontmatter } = await bundleMDX({
      cwd: `/path/to/site/content`,
      ..
})