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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

或

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

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

Answer 3

您要使用的本地图像需要相对于pubic文件夹中的index.html文件进行引用。因此，就您而言：

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

background.jpg必须位于“公共”文件夹内的一个名为“图像”的文件夹中。

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