Where to put images with SvelteKit

在SvelteKit中，管理静态资源如图像、样式表、字体等，通常放置在项目的 static 目录下。这个目录的特殊之处在于，其中的文件会被 SvelteKit 作为静态文件服务，这意味着它们可以通过简单的 URL 直接访问。

如何操作：

1. 创建 static 文件夹： 如果在您的 SvelteKit 项目中不存在 static 目录，您需要手动创建它。这个目录应该位于项目的根目录。

2. 存放图像： 将您的图像文件放置在 static 目录中。例如，您可以将一个名为 example.jpg 的图像放在 static/images 子目录中。

3. 在 Svelte 组件中引用图像： 在您的 Svelte 文件或 HTML 中，您可以通过相对于网站根目录的路径来引用这个图像。例如：

   html
   <img src="/images/example.jpg" alt="Example Image">

示例：

假设您正在开发一个博客网站，需要在文章中插入一些图像。您可以按照以下步骤操作：

1. 图像存储： 将所有文章的图像存放在 static/images/posts 目录中。例如，有一张图像路径为 static/images/posts/article-1-header.jpg。

2. 在 Svelte 组件中使用图像： 在您的文章组件中，您可以这样插入图像：

   html
   <script>
     export let headerImage = '/images/posts/article-1-header.jpg';
   </script>
   
   <img src={headerImage} alt="Blog Post Header">

通过这种方式，您的静态资源管理结构清晰且易于维护，同时也利于通过 CDN 进行优化，提高网站的加载速度。