SvelteKit执行npm run build打包后图片无法正常显示问题求助

以下是该场景下最常见的几类原因及对应修复方案：

• 静态资源引用路径不符合官方约定
  SvelteKit 规定 static 目录下的资源会被直接托管到应用根路由下，引用时不需要额外添加static前缀。你当前使用的src="static/bird.jpg"仅能被开发环境的兼容逻辑识别，生产构建时static目录本身不会被打包到产物中，资源实际的访问路径为/bird.jpg。

修复方案：将图片标签修改为 <img src="/bird.jpg" alt="a bird"/>。

• 早期测试版本的已知缺陷
  你使用的v1.0.0-next.107属于非常早期的预览测试版，本身存在静态资源处理的已知bug：该版本开发服务会额外映射/static/*路由到静态资源目录，但生产构建不会生成对应的static子目录结构，导致路径404。

修复方案：若暂时无法升级到稳定版SvelteKit，可在构建配置中添加规则，手动将static目录下的资源额外复制到构建产物的static子目录中；优先建议升级到SvelteKit稳定版规避已知问题。

• 自定义子路径部署配置冲突
  如果你在svelte.config.js中配置了paths.base参数（用于将应用部署到域名的子路径下），所有根路径的静态资源引用都需要添加base前缀才能正常访问。

修复方案：从$app/paths导入base变量，将图片路径修改为 <img src={${base}/bird.jpg} alt="a bird"/>。

• 文件名大小写不匹配
  如果你的开发环境为Windows或macOS（文件系统默认不区分大小写），而生产预览服务的运行环境区分大小写，当实际文件名和代码中引用的大小写不一致时（如实际文件名为Bird.jpg，代码中写为bird.jpg），就会出现开发正常、生产加载失败的问题。

修复方案：核对实际文件名与代码引用的大小写，保持二者完全一致。

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