如何在sveltekit中导入图片并在css中使用答案

【问题标题】：How to import image and use in css in sveltekit如何在sveltekit中导入图片并在css中使用
【发布时间】：2022-12-31 21:25:17
【问题描述】：

我正在使用 sveltekit，我想知道如何导入图像并在 CSS 背景属性中使用它。
这是我尝试过的：

<script>
    import img from '$lib/images/background-shaded.jpg';
</script>

<div>
    <h1>Hello World</h1>
</div>

<style>
    div {
        background-image: url({img});
    }
</style>

现在，我只是将图像放在静态文件夹中并通过它的 URL 使用。也许这是推荐的方法......

谢谢。

【问题讨论】：

标签： svelte sveltekit

【解决方案1】：

您根本不必导入图像。 Vite 将解析 CSS 中的 URL：

div {
    background-image: url($lib/images/background-shaded.jpg);
}

（在构建时将发出资产并相应地替换 URL。）

【讨论】：