How to Integrate It Into mdsvex?

[Haggets]

I've been working on a documentation website that loads the docs from a [slug] route, this would be the closest example. However, i'm unable to think of a way on how to replace the generated imgs with , and i can't seem to find any guide or post on how something like this could be approached, so i was hoping i could get some pointers here.

Thank you so much for your great contribution zerodevx! It's an outstanding component!

[zerodevx]

Hey, thanks for your note. TBH I don't have the answer off-hand; but as a rule of thumb, if:

a) these images are in your local drive;
b) the local paths can be resolved at compile time;

then there should be a way to implement.

Edit: could you provide some minimal code of your page?

[Haggets]

Thus far i have not attempted to implement it yet. I am using Mdsvex to implement the Markdown dynamically by fetching files from a separate folder and inserting it into the page.

/* +page.server.ts */
import { error } from '@sveltejs/kit';
import he from 'he';

export async function load({ params, fetch }) {
	try {
		const module = await import(`$docs/${params.slug}.svx`);
		const content = he.decode(module.default.render().html);

		// Code related to extracting heading data... flawed and causes mismatch between localhost and deployment

		return {
			title,
			content,
			headings: headingsData
		};

	} catch (err) {
		console.error(err);
		error(404, 'Not found');
	}
}

/* +page.svelte */

// ...
<main class="drawer-content w-fit scroll-pt-10 px-4 pb-8 md:px-12 2xl:px-24" data-type="docs">
    <article>
        <header>
            <h1>{data.title}</h1>
        </header>

        {@html data.content}
    </article>
</main>
// ...

Fortunately, i stumbled upon this reddit thread which seems to have the same implementation in mind, and it led me to this Github repo which implements custom video support inside of their Mdsvex config file, so my guess is that something similar could be done with svelte-img. I'll definitively try to implement it this way.

What i can't wrap my head around though, is how to import the image data dynamically using this method, since it can't just be imported with a simple path in the src parameter, perhaps fetching the image inside of the same function using glob import?

Thank you for responding by the way!

[Haggets]

I gotta apologize for the dumb question, i guess i was in a mental lock when i asked this but i've just realized i can just, put the component inside the file since it's MDX/SVX files which allows for components in Markdown, instead of doing the overly complicated method i was thinking of haha.