NextJS relative image imports

[SamuelQuinones]

Hi, I've been trying to figure out if its possible for image imports to resolve relative to a nested directory, let me explain:

I have the following structure

where posts will be stored in a named directory, with an index file and any other resources

And in the index.mdx file for "building-a-blog" I want add the dummy.png image, So i'm trying this:

it wasn't working, but when doing research I saw that it looked like some kind of fix for this was put in place in the most recent release as part of #270 but I couldn't quite figure out how to get it to work,

I tried updating my makeSource function with an esbuildOptions function:

export default makeSource({
  contentDirPath: "_posts",
  documentTypes: [Post],
  mdx: {
    esbuildOptions: (options) => {
      options.loader = {
        ...options.loader,
        ".png": "dataurl",
      };
      return options;
    },
    remarkPlugins: [remarkMdxImages],
  },
});

and tried using the remarkMdxImages plugin as it seemed that's what most people were doing

When i do this, I get an error in the console:

I don't know if I'm missing something, or if the fix mentioned in #270 was for something completely different

Theres nothing special about the project either, it uses https://github.com/SamuelQuinones/samtheq.com with the example additions from the getting started documentation.

[SamuelQuinones]

I should also note that when I try to reference an image in the public directory:

it renders on the page just fine

[schickling]

Thanks a lot for opening this issue. This seems to be a duplicate of #11.

In case you think it's a different issue, I'm happy to re-open this issue.