Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Static adapter does not honor base path for static files #3232

Closed
Ghirigoro opened this issue Jan 7, 2022 · 5 comments
Closed

Static adapter does not honor base path for static files #3232

Ghirigoro opened this issue Jan 7, 2022 · 5 comments
Labels
bug Something isn't working
Milestone

Comments

@Ghirigoro
Copy link

Ghirigoro commented Jan 7, 2022

Describe the bug

  1. Create a project with a static adapter.
  2. Add this to the config: paths: { base: '/apath'}
  3. Build the project
  4. Preview the project
  5. Note that any files in static folder are resolved at the root and ignore the base path. i.e. localhost:3000/img.png instead of the expected localhost:3000/apath/img.png

I would expect the base path to be honored across the board and not just for js/css files.

Reproduction

NOTE: I'm not sure if this is a bug or static files intentionally must always resolve to the root. If this is expected behavior I'll change this to a feature request, if it is indeed a bug then I will provide a repository highlighting the issue.

Logs

NA

System Info

System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 664.50 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.2.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.4 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 93.1.29.80
    Chrome: 97.0.4692.71
    Firefox: 95.0.2
    Firefox Developer Edition: 82.0
    Safari: 15.1
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0-next.23 => 1.0.0-next.24 
    @sveltejs/kit: next => 1.0.0-next.216 
    svelte: ^3.42.6 => 3.45.0

Severity

blocking all usage of SvelteKit

Additional Information

No response

@Ghirigoro
Copy link
Author

Ghirigoro commented Jan 7, 2022

Someone kindly pointed out on the discord chat that I can work around this issue by manually prefixing my file paths for things in static with the base path. For example:

<script lang="ts">
  import { base } from '$app/paths';
  //...
</script>
<img src={`${base}/my-static-file.svg`}/>

While a bit tedious it's fine if that's the intended approach, but it does break down in places where you don't have access to $app/paths - e.g. referencing font files in css, or favicons in html.

@benmccann benmccann added this to the 1.0 milestone Jan 18, 2022
@benmccann benmccann added the bug Something isn't working label Jan 18, 2022
@benmccann
Copy link
Member

@Ghirigoro can you set the assets option to be your domain + base directory as an easier workaround?

@benmccann
Copy link
Member

Actually, I think this should be fixed by #3346

@lukaso
Copy link

lukaso commented Sep 27, 2023

This does not appear to be fixed. I've just run into this issue on version 1.25.1. The workaround from @Ghirigoro is working.

@lukaso
Copy link

lukaso commented Sep 27, 2023

My svelte.config.js:

const config = {
	preprocess: vitePreprocess(),

	kit: {
		adapter: adapter({
			fallback: 'index.html',
			pages: '../assets/console'
		}),
		paths: { base: '/console' }
	}
};

And my img tag:

Broken on production build but working when runing in dev vite dev:

<img src="/images/image.svg" />

Fixed:

<img src={`${base}/images/image.svg`} />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants