Open varya opened 1 month ago
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 ;)
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.
let's don't if tricky :)
@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?
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 andremark-embed-images
available here: https://github.com/bridge-design/website/pull/49/files. However, the configuration is significantly different, making direct replication ineffective.