如何正确处理 sveltekit 中的图像和资产

Question

我是 sveltekit 的新手，

我的主要问题是：用 SvelteKit 将图像放在哪里？以及如何使用它。在静态文件夹中，对吗？

但这会导致一个问题：当在此路线中：“@domain/dashboard”时，我使用以下代码：

<img src="user.png" />

它尝试在@domain/user.png 中找到它，一切正常！但是当我使用这条路线：@domain/users/1时，它会尝试在@domain/users/user.png（除了@domain/user.png）中找到它。

请帮我。

ps：我看到有一些主题建议使用这样的东西：

import logo from '$lib/assets/user.png';

所以如果我将图像复制到 lib 文件夹中，静态文件夹的原因是什么？

Answer 1

要使链接在任何地方都有效，您只需以 a 开头（如果应用程序要托管在服务器的子路径上，/则可能是），从而使路径成为绝对路径。base

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

<!--
  For example for static sites for GitHub pages which are on:
  https://[user-name].github.io/[repository-name]/

  base should be set to '/[repository-name]'
-->
<img src="{base}/user.png" />

中的内容static可以按原样引用。

其中的所有内容lib均用于进口，这使得可以首先转换资产。例如，必须经过预处理的语言（例如 SCSS）中的样式表。

导入资产还可以确保添加哈希值，这有助于缓存失效，以防资源发生更改。

<script>
  import userSrc from '$lib/images/user.png';
</script>
<img src={userSrc} />