Supporting Relative Image Paths in Markdown

[varya]

Is Your Feature Request Related to a Problem? Please Describe. It would be beneficial to reference images in Markdown files using their relative paths, such as ![](./my-image.png). This capability would allow for storing images in the same directory as the associated blog post, streamlining the content organization.

Describe the Solution You'd Like I'm uncertain about the exact solution. In previous versions of Next.js, my website utilized a different configuration that sometimes included webpack loaders to manage image paths effectively. Most recently, I tried integrating remark-embed-images, but this did not work with this setup due to a conflict during page builds. Additionally, I've reviewed other websites using this setup and found that none have implemented relative paths for images yet.

Describe Alternatives You've Considered I am open to alternatives and not strictly looking to change the existing setup. I am seeking advice on how to incorporate either a different image loader or successfully integrate remark-embed-images into my configuration. Currently, I have a branch with NextJs@14 and remark-embed-images available here: https://github.com/bridge-design/website/pull/49/files. However, the configuration is significantly different, making direct replication ineffective.

[abernier]

I think we can just implement this in https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/components/Image.tsx resolving the relative URL in here...

@timlrx can you confirm? If yes I can do this ;)

[timlrx]

Sorry for the late reply, @abernier, I think it's slightly more tricky then that since you might also have to copy and move the images to public? Also, handling of all paths should be consistent e.g. for videos and links. But open to discussion, to see what's the best way to support it or possibly including an approach in the readme.

[abernier]

let's don't if tricky :)

[varya]

@abernier @timlrx

I copied the source of remarkImgToJsx from pliny/mdx-plugins/index.js and modified it by adding the following code after the line 30.

        // for relative paths
        if (imageNode.url.startsWith('./')) {
          const sourceFileDir = file?.data?.rawDocumentData?.sourceFileDir

          if (sourceFileDir) {
            const imagePath = path.join(process.cwd(), 'data', sourceFileDir, imageNode.url)
            const targetDir = path.join(process.cwd(), 'public', 'static', sourceFileDir)
            fsExtra.ensureDirSync(targetDir)
            const targetImagePath = path.join(targetDir, path.basename(imageNode.url))
            fsExtra.copySync(imagePath, targetImagePath)
            imageNode.url = path.join('/static', sourceFileDir, path.basename(imageNode.url))
          }
        }

Would that be OK solution to add to the setup?