How to deploy sveltekit application on non root path built using adapter-node?

Question

I have created a Sveltekit application which I want to host at non root path like http://localhost:3000/dashboard

My svelte.config.js is

import adapter from '@sveltejs/adapter-node';
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        paths: {
            base: '/dashboard',
        },
        csrf: { checkOrigin: false }
    },
    preprocess: [
        preprocess({
            scss: {
                prependData: '@use "src/variables.scss" as *;',
            },
        }),
    ],
    output: {
        globalObject: 'this',
    },
};

export default config;

I am using images like <img src="/images/logo_new.svg">

I am able to build using command

npm run build

To run I am using command

node build

Now I am able to see my application on http://localhost:3000/dashboard but images are not able to load. In console I am seeing 404 for all image paths.

My application is trying to open http://localhost:3000/images/logo_new.svg instead of http://localhost:3000/dashboard/images/logo_new.svg

What is right way to deploy sveltekit application on non root path?

Answer 1

If you have a base path defined you also have to use it when specifying things like an image src or link href:

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

<img src="{base}/images/logo_new.svg">

An alternative would be to import the image which also has the advantage of an hash being added that will make sure the image is not cached too long.

// whatever the path is from file, or put in sub-directory of `lib` and use `$lib/..`
import logoUrl from '../images/logo_new.svg';

<img src={logoUrl} >

For generated assets the base should be added automatically.