SvelteKit资源处理：嵌套路由下生产/预览环境WebP图片404

问题场景 #

在/about-us/social-responsibilities页面加载转换后的WebP图片时，开发环境执行npm run dev一切正常，但执行npm run preview或部署到Vercel后，图片返回404错误。排查发现图片请求路径多了/about-us前缀（实际请求/about-us/_app/immutable/assets/we-support-farmers-soldiers-17dde5c7.webp），正确路径应为/_app/immutable/assets/we-support-farmers-soldiers-17dde5c7.webp。

用到的代码示例：

<script>    
import supportImg from '$lib/assets/images/we-support-farmers-soldiers.jpg?webp';
</script>

<div>
<img src={supportImg} loading="lazy">
</div>

解决方案 #

方案1：配置资源根路径 #

在svelte.config.js中设置paths.assets为根路径，强制所有静态资源从网站根目录加载，避免路由前缀干扰：

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    paths: {
      assets: '/'
    }
  }
};

export default config;

方案2：手动生成绝对路径 #

通过new URL()结合import.meta.url构建资源的绝对URL，彻底规避相对路径问题：

<script>    
import supportImg from '$lib/assets/images/we-support-farmers-soldiers.jpg?webp';
const imgUrl = new URL(supportImg, import.meta.url).href;
</script>

<div>
<img src={imgUrl} loading="lazy">
</div>

方案3：结合BASE_URL拼接路径 #

利用SvelteKit内置的import.meta.env.BASE_URL环境变量，拼接出正确的根路径资源地址：

<script>    
// 加上&url后缀获取资源路径字符串
import supportImg from '$lib/assets/images/we-support-farmers-soldiers.jpg?webp&url';
const imgUrl = `${import.meta.env.BASE_URL}${supportImg}`;
</script>

<div>
<img src={imgUrl} loading="lazy">
</div>

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