静态文件夹的精简路径

Question

我使用 Sveltekit 并将一些图像放入静态文件夹中。静态 > 图像 > image1.png 等

在源代码 src 中，我有一个名为 的文件夹lib，在lib一个名为 的文件夹内components，有一个文件Footer.svelte。在该文件中，我想引用我的 image1 （它的绝对路径为~/myapp/static/images/image1.png。即使当我尝试此路径时，它也会抛出错误。

所以： src > lib > components > Footer.svelte

static > images > image1.png

src和都static位于 的根目录中myapp。

我的这一行Footer.svelte： import Image from '~/myapp/static/images/image1.png';

Footer.svelte我的抓取正确的路线是什么image1.png？

请参阅问题描述。

Answer 1

static不应导入中的文件，它们应作为静态文件直接在应用程序的根目录中提供，以便您可以将它们引用为：

<img src="/images/image1.png" />

如果您想导入图像，我建议将其放入src/lib并通过以下方式导入：

import image from '$lib/.../image1.png';

<img src={image} ... />

这还会向构建输出中的资源添加哈希值，确保如果稍后图像内容发生更改，缓存会失效。仅将静态目录用于robots.txt需要固定路径的情况。

（别名的映射$lib是由SvelteKit创建的，还可以配置其他别名。还有一个files配置，可以更改lib和其他目录的路径。您也可以从其他位置导入，例如将图像放在其他文件旁边一条路线（如果它特定于该路线）。