使用 SvelteKit 将图像放在哪里

Question

我已经使用 Svelte 一段时间了，现在我已切换到 SvelteKit，这样我就可以添加多个页面。我想向我的网站添加一些图像，但我不知道将它们放在哪里。在 Svelte 中，我只是将它们放入public/images，但没有SvelteKit 文件夹（如果重要的话，public我会设置它）。npm init svelte@next my-app 我会把它们放进去吗static？

谢谢！

Answer 1

我建议将图像放在下面src/lib，而不是static。例如，您可以创建一个src/lib/images或src/lib/assets文件夹并将它们放在那里。

原因是性能：

对于从 下任何位置导入的文件src，Vite 在编译时会向文件名添加哈希值。myImage.png可能最终会变成myImage-a89cfcb3.png. 哈希值基于图像内容。因此，如果您更改图像，它将获得新的哈希值。这使得服务器能够向浏览器发送很长的缓存过期时间，以便浏览器可以永久缓存它或直到它发生更改。它是基于密钥的缓存过期，在我看来是最好的一种：只要需要就缓存。（服务器是否确实在响应中发送正确的缓存标头可能取决于您使用的 SvelteKit 适配器以及您所在的主机。）

相比之下，下面的图像的static名称中没有添加哈希。您可以使用该目录来执行需要特定文件名的static操作。robots.txt由于即使其内容发生变化，文件名也保持不变，因此这些文件最终必然具有cache-control包含max-age=0, must-revalidate和 的值etag，这意味着即使浏览器缓存了图像，它仍然需要进行服务器往返来验证缓存的图像是正确的。这会减慢您网站上每个图像的速度。

用法：

将图像放在 下时src/lib，您可以像这样引用它们：

<script>
import img from '$lib/images/img.png';
</script>

<img src={img} alt="Image" />

我建议通过向项目添加svelte-preprocess-import-assets来简化，这会自动执行导入图像的过程并清理代码。您编写以下内容，它会生成上面的代码：

<img src="$lib/images/img.png" alt="Image" />

Answer 2

我添加了图像static/images并像 @b2m9 所说的那样引用它们src="/images/photo.jpg"，它工作得很好。