Svelte 找不到图像-解网

问：

我正在尝试在我的苗条项目上添加本地图像。但它给出了 404 错误。我该如何解决？

``

<script>
    const src = './image/Banner.png'
</script>

<main>
    <header>
        <div class="Banner">
            <div class="banner-img">
                <img src="{src}" alt="">
            </div>
            <div class="banner-text"></div>
        </div>
    </header>
</main>

``

这是错误

[23：51：25] 404 ─ 0.20ms ─ /image/Banner.png

我正在尝试在我的苗条项目上添加本地图像。但它给出了 404 错误your text

html svelte sveltekit svelte-component

<script>
    import bannerImg from "$lib/Banner.png"; // The href of the image
</script>

<main>
    <header>
        <div class="Banner">
            <div class="banner-img">
                <img src={bannerImg} alt="">
            </div>
            <div class="banner-text"></div>
        </div>
    </header>
</main>

您可能还想在 svelte.config.js 文件的 kit.alias 中设置别名，如下所示：

kit: {
  ...
  alias: {
    ...
    $img: "src/lib/imgs"
  },
  ...
}

然后你可以把它放在一个名为imgs的额外文件夹中，并像这样访问它：

<script>
    import bannerImg from "$img/Banner.png";
</script>

2赞 Toni BCN 11/17/2022 #2

将您的图像放在 /public 文件夹或子文件夹（在我的示例中为 /public/assets/ ）中，并在 src atribute 中调用它，如下所示：

<img src="assets/pdf_icon.gif" alt="Pdf">

Svelte 找不到图像

Svelte can't find image

评论

评论