$app/paths

import { asset, match, resolve } from '$app/paths';

asset

Available since 2.26

Resolve the URL of an asset in your static directory, by prefixing it with config.paths.assets if configured, or otherwise by prefixing it with the base path.

During server rendering, the base path is relative and depends on the page currently being rendered.

<script>
	import { asset } from '$app/paths';
</script>

<img alt="a potato" src={asset('potato.jpg')} />

function asset(file: AssetPath): string;

match

Available since 2.52.0

Match a path or URL to a route ID and extracts any parameters.

import { match } from '$app/paths';

const route = await match('blog/hello-world');

if (route?.id === '/blog/[slug]') {
	const slug = route.params.slug;
	const response = await fetch(`/api/posts/${slug}`);
	const post = await response.json();
}

function match(url: URL | string): Promise<
	| {
			[K in RouteId]: {
				id: K;
				params: RouteParams<K>;
			};
	  }[RouteId]
	| null
>;

resolve

Available since 2.26

Resolve a pathname by prefixing it with the base path, if any, or resolve a route ID by populating dynamic segments with parameters. In hash routing mode, the returned URL starts with #.

During server rendering, the base path is relative and depends on the page currently being rendered.

import { resolve } from '$app/paths';

// using a pathname
const resolved = resolve(`blog/hello-world`);

// using a route ID plus parameters
const resolved = resolve('/blog/[slug]', {
	slug: 'hello-world'
});

function resolve<
	T extends
		| RouteIdWithSearchOrHash
		| PathnameWithSearchOrHash
>(...args: ResolveArgs<T>): ResolvedPathname;