How to obtain absolute file paths (for images)?

[stephanbogner]

Intention:

I'd like to create a remark-plugin that converts ![Some alt](image.png) to an <img>-element with a srcset using sharp to convert the images.

---

The problem:

I have no reference to the actual image file.

---

Approaches / Research

(A) I tried two ways:

• To access the information for the image node, but that only has the path as written in the Markdown file.
  • → It makes sense that this doesn't have the information.
• To access the absolute path of the markdown file itself and then figure out the image path myself.
  • → The VFile only has the cwd which is obviously not the location of the markdown file

The information I get for an image:

{
  type: 'image',
  title: null,
  url: 'placeholder.jpeg',
  alt: 'Image alt text placeholder',
  position: {
    start: { line: 7, column: 1, offset: 841 },
    end: { line: 7, column: 48, offset: 888 }
  }
}

The the file object I get through transformer:

VFile {
  data: {},
  messages: [],
  history: [],
  cwd: '/Users/stephan/Documents/Projekte-kommerziell/Eileen-Website/repository',
  value: '\nLorem ipsum dolor sit amet.'
}

(B) Context:

I am using Remark through Astro so the issue might also arise from there.

(C) In Issue 7 of remark-embed-images I also read (but didn't really understand it):

You can pass a vfile. You can also pass any argument that vfile supports (such as an object with a path).
Without such information, plugins that use the file system have no clue where things are!

(D) Gatsby Plugin:

I also found gatsby-remark-images which basically does what I need but the code seems to be tailored to Gatsby.

---

Question:

Is something like this possible?
And if so how would I approach this?

---

Thanks already in advance 🙏
(I really only post when I am completely out of ideas)

[wooorm]

Hi there! The answer is: it depends. First of all. This is not what remark is for. remark is about markdown. This is about HTML. You want rehype. More on the difference is available in several docs, including this one in remark-rehype.

I have no reference to the actual image file.

Well, where are the images?

I am using Remark through Astro so the issue might also arise from there.

Perhaps!

→ The VFile only has the cwd which is obviously not the location of the markdown file

It should have a path (which is a getter, so you don’t easily see it in the console when printing file, what do you see if you print file.path). If it doesn’t, then that’s a bug in Astro.

[stephanbogner]

Thanks a lot for the help and the super fast response ❤️

Hi there! The answer is: it depends. First of all. This is not what remark is for. remark is about markdown. This is about HTML. You want rehype. More on the difference is available in several docs, including this one in remark-rehype.

Good call.
In my case with Astro it probably still makes sense to stick with remark. Because Astro allows to have components inside Markdown and also allows Markdown files to use layouts.
So basically I only want to alter the parts about images ... even though it might not be best-practice as its html inside markdown.

Well, where are the images?

In my case they are right next to the .md-files:
E.g. ![Some alt](my-image.png).
In the future potentially also in a sub-folder, e.g. ![Some alt](media/my-image.png).

It should have a path (which is a getter, so you don’t easily see it in the console when printing file, what do you see if you print file.path). If it doesn’t, then that’s a bug in Astro.

That's really helpful because it returns undefined. I am gonna check with the Astro-team and take it from there.

If I make some progress I am gonna post it here 🤞

[wooorm]

In my case with Astro it probably still makes sense to stick with remark.

remark and rehype are used in combination in Astro. It’s not one or the other for the source language. It’s both when turning markdown into HTML. rehype is the ecosystem for things that deal with HTML, even if the original language is MD(X).

Because Astro allows to have components inside Markdown and also allows Markdown files to use layouts.

Right, I believe I understand, as they reuse the MDX extensions to markdown I made, for their format. Those components can be access in the markdown AST and in the HTML AST. But, I believe your question is not about components, but about elements?

I am gonna check with the Astro-team and take it from there.

👍

The problem seems to be here: https://github.com/withastro/astro/blob/de123b28b3ff398b800cb598f20326ca85a0fb60/packages/markdown/remark/src/index.ts#L90.

[stephanbogner]

remark and rehype are used in combination in Astro. It’s not one or the other for the source language. It’s both when turning markdown into HTML. rehype is the ecosystem for things that deal with HTML, even if the original language is MD(X).

I see. Interesting to start to understand how it all works together. BTW: Apart from the Astro bug it seems really easy to create plugins for remark, so 👍 for your work.

Right, I believe I understand, as they reuse the MDX extensions to markdown I made, for their format. Those components can be access in the markdown AST and in the HTML AST. But, I believe your question is not about components, but about elements?

Interesting and yes, I just want to alter the normal markdown images à la ![]().

The problem seems to be here: https://github.com/withastro/astro/blob/de123b28b3ff398b800cb598f20326ca85a0fb60/packages/markdown/remark/src/index.ts#L90.

Thanks for the investigation! I filed a bug report. Let's see 🙂

[stephanbogner]

Conclusion:
It was an issue with Astro, which was fixed now and now file.path works as intended.

Thanks @wooorm ❤️

[wooorm]

sweet!

[kaiwen-wang]

In the function header for the remark plugin

return function (tree, file) {

Use file.filename