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

Question

我是 sveltekit 的新手，

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

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

<img src="user.png" />

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

请帮助我。

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

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

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

Answer 1

要使

static

的链接在任何地方都可以工作，您只需将路径设置为绝对路径，以

/

开头（如果应用程序要托管在子系统上，则可能是

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} />

这是我推荐的方法。