SvelteKit动态路由slug参数与媒体路径冲突问题求助

这个问题的核心是SSR阶段静态资源的相对路径被错误匹配到动态路由：

• 你在组件里用相对路径引用img/icon.svg时，服务端渲染过程中会把这个资源请求当成路由请求，匹配到posts/[author]/[articleID]的动态路由规则，进而将img解析为author参数、icon.svg解析为articleID参数，直接覆盖了原本的路由参数。
• 客户端运行时，浏览器会基于当前页面URL正确处理相对路径，所以参数显示正常。

解决方法 #

1. 使用绝对路径引用SVG

把SVG的引用路径改成绝对路径（开头加斜杠），让服务端直接识别为静态资源请求，不会走路由匹配逻辑：

<!-- 原相对路径写法 -->
<img src="img/icon.svg" alt="icon">
<!-- 修改为绝对路径 -->
<img src="/img/icon.svg" alt="icon">

2. 将SVG作为组件导入（推荐）

把SVG文件放到src/lib/assets目录下，直接导入为Svelte组件使用，SvelteKit会自动处理资源打包，从根源避免路径解析冲突：

// 在组件中导入SVG
import Icon from '$lib/assets/icon.svg';

<!-- 直接使用组件 -->
<Icon />

3. 确认路由规则优先级（可选）

如果你的路由结构存在其他潜在冲突，可以调整src/routes目录下的文件命名，确保动态路由规则不会被静态资源请求误匹配，但前两种方法已经能彻底解决当前问题。

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