Add Relative Image Path

[ilkersigirci]

I have stored my images in src/assets/images directory. In order to show image in markdown files, I have to prefix ../../src/assets/images to each image. Could we add image relative path to the plugin so that I can just use image file name without any path prefix? Thanks

[benallfree]

You mean you want to do ![](image.png) instead of [](./image.png)?

It already supports relative paths https://github.com/benallfree/mdsvex-enhanced-images/blob/main/src/index.js#L26

Am I misunderstanding?

[benallfree]

Oh, I think I see what you mean. So if you have:

src/
   routes/
      test/
        +page.md
        foo.png

You want to be able to do:

# Test page

![](foo.png)

Right? If so, that makes sense. Maybe we should adjust the logic so it assumes a relative path (./) unless the path begins with /, ./, or ../. Would that work?

But then what would we do about Vite aliases like $img?

![]($img/foo.png)

Now I'm not sure the best way to solve it, it seems like ![](./foo.png) may be best.

[ilkersigirci]

I don't know the best way, either. But each time having to use ../../src/assets/images is tiresome. Thanks for the quick reply, though.

[benallfree]

What is the path of your markdown file?

[ilkersigirci]

My markdown file path is src/content/TestFile.md and my image directory is src/assets/images

[benallfree]

so why not ![](../assets/images/foo.png). Why are you going all the way out of src?

[ilkersigirci]

That is also works but I just want to clarify my folder structure.

[benallfree]

Ok then here's what I think could solve it:

import { enhancedImages } from 'mdsvex-enhanced-images'
import { join } from 'path'

mdsvex({
    remarkPlugins: [ 
       enhancedImages({
          resolve: (path) => path.startsWith('.') ? path : join(`.`, path) // default
       })
   ],
})

Then in your case, you'd create an alias '$images': 'src/assets/images' and use

resolve: path => path.startsWith('.') ? path : join(`$images`, path)

Does that seem clean? That would allow anyone to override the default resolver.

[ilkersigirci]

Ok then here's what I think could solve it:

import { enhancedImages } from 'mdsvex-enhanced-images'
import { join } from 'path'

mdsvex({
    remarkPlugins: [ 
       enhancedImages({
          resolve: (path) => path.startsWith('.') ? path : join(`.`, path) // default
       })
   ],
})

Then in your case, you'd create an alias '$images': 'src/assets/images' and use

resolve: path => path.startsWith('.') ? path : join(`$images`, path)

Does that seem clean? That would allow anyone to override the default resolver.

That would be perfect, thanks

[benallfree]

Update to 0.1.0 and see how it feels.

[ilkersigirci]

I have upgraded to 0.1.0. Unfortunately, I get build error

Build failed in 184ms
error during build:
[vite-plugin-svelte] [plugin vite-plugin-svelte] Error while preprocessing /home/ilker/Documents/MyRepos/blog-markdown/src/content/How.This.Blog.Developed.md - Cannot use 'in' operator to search for 'children' in undefined
file: /home/ilker/Documents/MyRepos/blog-markdown/src/content/How.This.Blog.Developed.md
TypeError: Error while preprocessing /home/ilker/Documents/MyRepos/blog-markdown/src/content/How.This.Blog.Developed.md - Cannot use 'in' operator to search for 'children' in undefined
    at visit (file:///home/ilker/Documents/MyRepos/blog-markdown/node_modules/unist-util-visit-parents/lib/index.js:353:22)
    at visitParents (file:///home/ilker/Documents/MyRepos/blog-markdown/node_modules/unist-util-visit-parents/lib/index.js:304:31)
    at visit (file:///home/ilker/Documents/MyRepos/blog-markdown/node_modules/unist-util-visit/lib/index.js:302:3)
    at Function.<anonymous> (file:///home/ilker/Documents/MyRepos/blog-markdown/node_modules/mdsvex-enhanced-images/dist/index.js:37:5)
    at freeze (/home/ilker/Documents/MyRepos/blog-markdown/node_modules/mdsvex/dist/main.cjs.js:821:28)
    at Function.process (/home/ilker/Documents/MyRepos/blog-markdown/node_modules/mdsvex/dist/main.cjs.js:1051:5)
    at markup (/home/ilker/Documents/MyRepos/blog-markdown/node_modules/mdsvex/dist/main.cjs.js:24419:32)
    at process_markup (file:///home/ilker/Documents/MyRepos/blog-markdown/node_modules/svelte/src/compiler/preprocess/index.js:311:26)
    at Module.preprocess (file:///home/ilker/Documents/MyRepos/blog-markdown/node_modules/svelte/src/compiler/preprocess/index.js:357:31)
    at async compileSvelte (file:///home/ilker/Documents/MyRepos/blog-markdown/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:89:20)
error: script "build" exited with code 1

[benallfree]

Can you please post the smallest markdown file that reproduces this error?

[ilkersigirci]

Actually, I got this error on each of my markdown files. An example markdown file is in the below

Content of src/content/How.This.Blog.Developed.md

---
title: How.This.Blog.Developed
description: How.This.Blog.Developed
date: '2024-7-22'
categories:
  - sveltekit
  - optimization
published: true
---

## Contents

## General

- 
- Built using SvelteKit

[benallfree]

I can't repro the issue, can you provide a minimal SvelteKit github repo or codepen that demonstrates it?

[ilkersigirci]

You can find it in my branch here. Probably, I am doing something stupid but couldn't figure it out myself

[benallfree]

I took a look but that repo is too complicated for me to troubleshoot.

Please use a fresh sveltekit project with a minimal MDsveX+enhanced-images example that repros this error.

[benallfree]

Update - I was able to repro the issue on a clean installation. Looking into it more :)

[benallfree]

https://github.com/ilkersigirci/my-blog/pull/9

[benallfree]

I updated things and vastly simplified the logic. Your blog was a good test case. Let me know how it goes :)

[matteocontrini]

I think this is related to the usage example in the readme, which suggests to use

mdsvex({
  remarkPlugins: [enhancedImages()]
})

When it should be:

mdsvex({
  remarkPlugins: [enhancedImages]
})

Also, in remark plugins options should be passed like this:

mdsvex({
  remarkPlugins: [
    [ enhancedImages, { /* options */ } ]
  ]
})

EDIT: overlapped with the above reply :)

[benallfree]

@matteocontrini Yes actually you're right that was part of the issue but then I discovered other problems as I tested various scenarios. Please try 0.2.0 and see how it goes for you.

Edit: the remark and rehype ecosystems are very cool, this project got me looking into those more deeply :)

[ilkersigirci]

Thanks for your hard work. Everything runs as expected, now