SvelteKit中如何导入图片并在CSS中使用

你当前的代码问题在于SvelteKit的<style>标签不支持直接使用组件脚本里的变量（比如{img}），因为样式是静态编译的，无法直接访问组件的动态值。下面是两种可行的解决方案：

方法1：使用内联样式绑定 #

直接将导入的图片路径绑定到元素的style属性，这样可以直接引用脚本里的img变量：

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

<div style="background-image: url({img})">
    <h1>Hello World</h1>
</div>

方法2：通过CSS变量传递路径 #

如果想保持样式写在<style>标签里，可以先把图片路径赋值给一个CSS变量，再在样式中引用这个变量：

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

<div style="--background-image: url({img})">
    <h1>Hello World</h1>
</div>

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

关于static文件夹的使用 #

你提到的将图片放在static文件夹直接通过URL引用的方式是完全可行的，适合不需要构建优化的场景：

• 若图片放在static/images/background-shaded.jpg，可以直接在样式中写：

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

• 这种方式的优势是简单直接，资源不会经过Vite的构建处理；而从$lib导入的图片会被Vite自动优化（比如压缩、添加哈希后缀用于缓存），适合需要构建优化的图片资源。

内容的提问来源于stack exchange，提问作者TJBlackman