SvelteKit部署GitHub Pages时图片路径不符合base规则报错求助

问题详情 #

• 部署SvelteKit到GitHub Pages时，先触发Error: 404 link doesn't begin with \base``错误
• 给所有链接添加{base}后，又出现新报错：/tbilisi-1.webp does not begin with 'base'
• 图片链接来自前端数组（如['tbilisi-1.webp', 'tbilisi-2.webp', ...]），当前拼接代码：

  <img src="{base + '/' + tour.src[0]}" />
  

解决方案 #

1. 确认base配置准确性 #

方式一：通过路由布局文件动态获取

在src/routes/+layout.js中，根据当前URL动态生成base，适配GitHub Pages的仓库路径：

export const load = ({ url }) => {
  return {
    base: url.origin + url.pathname.split('/').slice(0, -1).join('/')
  };
};

方式二：在配置文件中静态指定

修改svelte.config.js，直接配置GitHub Pages对应的仓库名作为base：

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter(),
    paths: {
      base: '/你的仓库名称'
    }
  }
};

2. 修正图片路径拼接逻辑 #

手动拼接容易出现重复斜杠等问题，推荐两种更可靠的方式：

方式一：使用$app/paths提供的base

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

{#each tours as tour}
  <img src={`${base}/${tour.src[0]}`} />
{/each}

该方式会自动处理base为空（根域名部署）的情况，生成正确的路径。

方式二：用new URL构建完整路径

<script>
  import { page } from '$app/stores';
</script>

{#each tours as tour}
  <img src={new URL(tour.src[0], $page.url).href} />
{/each}

通过原生URL API避免路径拼接错误，兼容性更好。

3. 检查图片文件存放位置 #

确保图片文件放在项目根目录的static文件夹下（如static/tbilisi-1.webp），构建时会自动将该目录下的资源复制到输出目录，保证路径可被正确解析。

4. 配置构建命令（可选） #

如果未在svelte.config.js中指定base，可在package.json的构建命令中添加--base参数：

{
  "scripts": {
    "build": "vite build --base=/你的仓库名称/"
  }
}

内容的提问来源于stack exchange，提问作者andromedstrain