Is it possible to make use of images placed in src/routes/<subfolder>/?

[rsolvang]

TL;DR: From what I can tell, images in subfolders are not included when the routes are generated. Is it possible to generate a list (array or object) of images in a subfolder in src/routes/, somehow?

I made a classic blog structure to get a feel for how Svelte (and Vite) works (src/routes/blog/2022-01-31-hello-world/index.md), which works fine in combination with MDsveX and some layout files etc. Then I added some images to the blog post path 2022-01-31-hello-world/. I expected to be able to reference these files somehow but they are not made available as far as I can see.

When I try to hit the image path directly, it does not exist (i.e. example.com/blog/2022-01-31-hello-world/an-image.jpg). Am I missing something obvious or does Vite/Svelte ignore image files nested into subfolders in routes/?

I'm new to Svelte (and pretty fresh to JavaScript), so forgive my ignorance! Having used Hugo, I just assumed images in a folder would be made available, as is the Hugo convention.

[nosovk]

You may check how it's done here - https://github.com/MailCheck-co/mailcheck.site/tree/master/src/routes/blog/does-buying-email-lists-still-work
it's done by https://github.com/MailCheck-co/mailcheck.site/blob/master/mdsvex-url-to-import.js

[rsolvang]

Thanks for your reply and code example, I'll have to study it further to understand whats going on. Can I take it from your answer that this functionality is not a feature that is included in Svelte(Kit) / Vite?

[wrex]

The correct link for the mdsvex plugin appears to be https://github.com/MailCheck-co/mailcheck.site/blob/master/mdsvexplugins/mdsvex-url-to-import.js

It appears to be added as a remark plugin. "Easy to add" for some maybe! That code is beyond my comprehension, currently. I may try it if I can figure out how it works and how to make it work with kit 1.0.

[kaiwen-wang]

I got it working. You'll want to use mdsvex-url-to-import.js and stick it somewhere. Rather than using their mdsvex.config.js and exporting it, you can write mdsvex config options [(docs)](https://mdsvex.pngwn.io/docs/ directly in svelte.config.js.

It seems to just drop in and work, but if your image links don't work it'll crash your whole site rather than gracefully failing.

Mine looks like this:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsvex } from 'mdsvex';
import fancyImages from './src/lib/mdsvex-url-to-import.js'

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	},
	extensions: ['.svelte', '.md'],

	preprocess:
		[
			vitePreprocess(),
			mdsvex({
				extensions: ['.md'],
				layout: {
					writing: 'src/routes/writing/post.svelte'
				},
				remarkPlugins: [
					fancyImages
				]
			})
		]
};

export default config;

I'm sure there are some downsides in addition to not using a CDN, but idk yet.

[ignatiusmb]

SvelteKit only has two types of route, pages which are defined by .svelte files, and endpoints which are defined by either .js or .ts files, see https://kit.svelte.dev/docs/routing. For static files that are served as-is, you're looking for the kit.files.assets option, which defaults to static directory, see https://kit.svelte.dev/docs/configuration#files and the demo app example.

To answer your question, there are 2 ways to go about this. If you're looking to generate the images in relation to your path, then you'll need to create an endpoint file that has the image extension as the suffix and returns the image blob as the body, ex. -> <app>/src/routes/blog/[slug]/an-image.jpg.ts.

The other, more straightforward way, would be if you already have the image file and wanted to serve them as is. In this case, you'll put them under <app>/static directory, but because they're served as-is, you'll need to hit the image path relative from the root, as in example.com/an-image.jpg. If you want to host them at the same level as your post path, then you'll need to replicate the structure from src/routes statically, meaning re-creating the folder structure like such -> <app>/static/blog/2021-01-31-hello-world/an-image.jpg, this can now be hit from the URL example.com/blog/2021-01-31-hello-world/an-image.jpg

[rsolvang]

Thanks, this explains a lot. I decided to go back to using Hugo for this specific project, as it was quite blog centric and it was a big point to keep the assets in the same folder as the text content.

[nosovk]

it's easy to add that feature, I provided link to example. Kit is pretty easy to extend.