Image asset in Markdown crashes `astro dev` with ENOENT error

[andersk]

What version of astro are you using?

2.1.3

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Linux

What browser are you using?

Firefox

Describe the Bug

With experimental assets enabled, if add an image in src/assets and reference it from src/pages/index.md:

![image](../assets/astro-icon-dark.png)

the dev server crashes when reloading the page:

~/projects/github-s4wjpw 4s
❯ npm start
$ astro dev
  🚀  astro  v2.1.3 started in 79ms

  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

04:02:59 PM [serve]    404                                  /_image
[ENOENT: no such file or directory, open '/home/projects/github-s4wjpw/.file:///home/projects/github-s4wjpw/src/assets/astro-icon-dark.png'] {
  code: 'ENOENT',
  errno: -2,
  path: '/home/projects/github-s4wjpw/.file:///home/projects/github-s4wjpw/src/assets/astro-icon-dark.png',
  syscall: 'open'
}

~/projects/github-s4wjpw 8s
❯

This seems to be due to this '.' + added in #6466. As far as I can tell, that commit broke exactly what it purported to fix, so I must be missing something.

https://github.com/withastro/astro/blob/43daac7a9b4cc793369bbeb3f722f8de9d8f64c8/packages/astro/src/assets/vite-plugin-assets.ts#L105

This may be the same issue described in https://github.com/withastro/astro/issues/6462#issuecomment-1460737911, but the main issue of that report was different so I’m opening a new one.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-s4wjpw?file=src%2Fpages%2Findex.md

Participation

• [ ] I am willing to submit a pull request for this issue.

[mfrachet]

I've tried something very naive locally and it seems to work:

const isAbsolutlyReferenced = filePath.startsWith('/');
const filePathURL = isAbsolutlyReferenced
    ? new URL('.' + filePath, settings.config.root)
    : new URL(filePath, settings.config.root);

at https://github.com/withastro/astro/blob/51d603337f4f7176ac0e93df607fab7a428ff060/packages/astro/src/assets/vite-plugin-assets.ts#L81

I can open a PR if necessary, but I'm pretty sure there's a clever way to fix this 😅

[Princesseuh]

While this does fix this particular issue, unfortunately you'll run into other issues down the line.

I'm currently working on rewriting that section of the code completely to use a different technique because the current implementation has several flaws 😔

I'd accept a PR nonetheless, but your changes might get overridden before we release the version either way

[mfrachet]

I'm all for a better approach (and following the PR where you do the refactoring to understand the thing 🤓 ). If you're going to ship the refactoring soon, I will probably not make the changes, but if you think you'll need time and that my suggestion could patch this bug in the meantime, let me know, I'll open a PR during the day 😊

[Princesseuh]

I'm hoping to be sending a PR for this today

The gist of the issue is that in the specific context of images in Markdown, the image service stuff is being ran in Node instead of in Vite.

This cause numerous issues:

• We have to load the image service twice, which isn't ideal since they can be quite large
• Running in different contexts mean different possibilities and inconsistencies
• We're limited in how we can generate the final img tag.

Notably, this last point means that in build (and pre rendered SSR), we fail to point to the proper file.

---

What I'm hoping to do, is move the whole image service dance outside of the remark/rehype pipeline, and instead do it directly in the generated JS ran by Vite.

If for some reason we cannot do that and we still have to run the image service in Node, I'm hoping to use a technique similar to the __ASTRO_ASSET_IMAGE_MD_ stuff to at least point to the correct URL and I'll document the caveat of it running in Node.

[mfrachet]

Thanks for taking the time to explain 😊 ! Very much appreciated 🙏🏻