SvelteKit新手疑问：图片存放位置与正确引用方法

一、static 文件夹的用法与路径问题 #

• static 文件夹里的资源会原封不动部署到网站根目录，比如你放 static/user.png，部署后访问地址就是 @domain/user.png。
• 你遇到的路由不同导致路径错误，是因为用了相对路径。解决办法很简单：把图片路径改成绝对路径（开头加斜杠）：

  <img src="/user.png" />
  

  这样不管当前在 /dashboard 还是 /users/1 路由，都会去网站根目录找图片，不会出问题。

二、lib/assets 文件夹的引用方式 #

• 把图片放在 src/lib/assets/ 目录下，通过 import 方式引入使用：

  import userImg from '$lib/assets/user.png';
  <img src={userImg} alt="用户头像" />
  

  这种方式的优势很明显：
  • SvelteKit 会自动对图片做优化，比如压缩、格式转换，还能生成适配不同设备分辨率的版本。
  • 打包时会给文件名加哈希后缀，有效避免浏览器缓存旧资源的问题。
  • 配合 TypeScript 能做路径校验，防止手滑写错路径。

三、两个文件夹的核心区别与适用场景 #

• static 文件夹适合放这些资源：
  • 网站图标（favicon.ico）、robots.txt、sitemap.xml这类必须在根目录的文件。
  • 不需要优化的大文件（比如高清原图、视频文件）。
  • 需要固定URL的资源（比如社交分享卡片图，第三方服务可能要求固定路径）。
• lib/assets 文件夹更适合：
  • 页面里的常规UI图片（比如logo、按钮图标、用户头像）。
  • 需要自动优化、缓存控制的图片资源。

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