📝

【SvelteKit】他のページから遷移すると画像が表示されない

2024/02/22に公開

これはなに?

SvelteKitを使った開発でタイトルのような問題が発生したのでそのメモです。

SvelteKitバージョン

@sveltejs/kit@2.3.2

タイトル内容の詳細

リダイレクトやURLで直アクセスした際は表示されるが、他のページからaタグなどでページ遷移したとき、CSSで読み込んでいる背景画像などが表示されないことがあります。

例:
/home/+page.svelte

<div>
  <a href="/auth/login">ログイン</a>
</div>

/auth/login/+page.svelte

<div class="container">
  ...
</div>

<style>
  .container {
    background-image: url('login-background.jpeg');
  }
</style>

対応

先頭に / が必要。

/* url('login-background.jpeg'); */
url('/login-background.jpeg');

Discussion