如何在Svelte中使用本地静态图像

Question

我正在按照教程（https://svelte.dev/tutorial/dynamic-attributes）导入本地图像文件。但这没有用。在应用程序中找不到该图像。

我需要在哪里找到这些图像以使其像本教程中那样工作？

let src = './images/background.jpg'
.
.
.
<img {src} alt="background image" />

浏览器显示“找不到图像”。

Answer 1

对于sveltekit

假设我有一个文件 src/lib/assets/icon.png

为了导入它：

<script>
   import Icon from "$lib/assets/icon.png"
</script>

<main>
this is a download icon.
<img src={Icon} alt="download icon"/>

</main>

如果项目使用 vitePreprocess 那么它还可以解析 CSS url("$lib/assets/icon.png") 请参阅有关 [资产处理](https://kit.svelte.dev/docs/assets) 的 sveltekit 文档 (2认同)

Answer 2

您将使用的本地图像需要相对于公共文件夹中的index.html 文件进行引用。所以在你的情况下：

let src = './images/background.jpg'

background.jpg 需要位于“public”文件夹内名为“images”的文件夹中。

你可以将其引用为let src = 'images/background.jpg'

Answer 3

这是在 svelte 中使用图像的另一种方法：

.banner-container {
    background-image: url("/images/hero-banner.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
}

Answer 4

如果您使用vitejs / Sveltekit ， Vitejs官方网站上提到了一个简单的解决方案（点击这里）。
首先在脚本标签内：

<script>
const imgUrl = new URL('./img.png', import.meta.url).href
</script>

然后在你的图像标签中使用该变量，

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

或者，

<div class=" h-screen w-full" style="background-image: url('{bgUrl}') ;">
</div>

Answer 5

将您的图片文件夹放在公共文件夹中，然后像这样引用：

<img src="images/background.jpg" alt="background image" />

要么

let src = "images/background.jpg";
.
.
.

<img {src} alt="background image" />