page bundle images not handled

[ttys3]

Describe the bug

my blog mdx files is from docusaurus, and it support page bundle images well. recently I migrated to pliny. and found all images can not shown in the generated html

"page bundle images" means the image is under the same subdir as the index.mdx file. this way, I can keep the images and the blog markdown file in the same dir.

To Reproduce

the file struct is like:

blog
└── demo
    ├── foo.png
    └── index.mdx

Steps to reproduce the behavior:

enable nextjs trailingSlash, edit next.config.js add trailingSlash: true,

1. have a blog under /blog/demo/index.mdx

2. put a image under /blog/demo/foo.png

3. and write ![foo](foo.png) in /blog/demo/index.mdx

4. access /blog/demo/ blog via web browser, the image can not show ( /blog/demo/foo.png not found)

Expected behavior

support images put in page bundle

Screenshots If applicable, add screenshots to help explain your problem.

System Info (if dev / build issue):

• OS: [e.g. iOS]
• Node version (please ensure you are using 14+)
• Npm version

Browser Info (if display / formatting issue):

• Device [e.g. Desktop, iPhone6]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[ttys3]

I mean somthing like https://github.com/facebook/docusaurus/blob/26ae4164d6f90c231c6687363a3907b5f9f172b8/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts#L160C49-L160C49

tried https://github.com/sergioramos/remark-copy-linked-files but not work

[timlrx]

Sorry about that, it's pretty complicated to support image imports from the same folder since it has to go through webpack and I am not sure how it would work with next/image as well. The copy linked files approach could work, but might require additional transformation to the to the file path to ensure that all imports are relative to the public folder.

[timlrx]

Also, just a heads up that I will be making large changes to the example blog and migrating it to the new app dir structure very soon. Though I probably won't handle this image transformation automatically and would still recommend placing the images in the public folder.

[ttys3]

Can you document how to do this? (If do not consider the next/image extension) since all my blog use this kind of image. And many generator support it, vs code even added Ctrl + v auto save the Image to the same subdir.

[ttys3]

I hacked the plugin and now it works:

due to after contentlayer (which uses mdx-bundler), the fullpath is not correct under pliny.

https://github.com/ttys3/remark-copy-linked-files/blob/fb4dbb9c363b490dd66b190d738b917f81aeb98e/index.js#L72-L80

my hack

      // path is something like `/path-to-project-root/_mdx_bundler_entry_point-3e814d53-72fb-474b-8853-f64f1521e36a.mdx` 
      // after contentlayer (which uses mdx-bundler)
      // `file.data.rawDocumentData.sourceFilePath` begin with `blog/xxx`, does not include the `data` dir
      const fullpath = resolve(
        cwd,
        dataDir,
        file?.data?.rawDocumentData?.sourceFilePath ? dirname(file.data.rawDocumentData.sourceFilePath) : '',
        platformNormalizedUrl,
      );