SvelteKit中图片路径出现额外/products/前缀的问题排查

API 探路者

2026-8-5

问题分析与解决

前缀来源原因

出现/products/$lib/assets/images/phone2.svg的核心原因是：你的商品详情页路由带/products/前缀（比如/products/123），而你引用图片时，浏览器把$lib开头的路径当成了相对路径，自动和当前页面的路由前缀拼接，所以多出了/products/。

SvelteKit里的$lib是专属别名，只有在组件脚本、服务端代码里会被框架解析为实际路径；如果直接在模板的img标签src里写$lib/xxx，浏览器无法识别这个别名，只会按相对路径规则处理。

解决办法

组件内正确导入图片：在组件脚本里先导入图片资源，再绑定到src属性：

<script>
  import phone1 from '$lib/assets/images/phone1.svg';
</script>

<img src={phone1} alt="手机1" />

改用静态资源绝对路径：如果图片放在项目static/assets/images目录下，直接用绝对路径引用：
```
<img src="/assets/images/phone1.svg" alt="手机1" />
```
修正API返回的路径：如果是接口返回的图片路径带$lib，需要在服务端把$lib替换为实际的静态资源根路径，或者前端拿到数据后做路径替换（比如把$lib替换为/）。