在Svelte的{#if}块中包裹样式时出现‘Not Found’错误

核心原因 #

SvelteKit对<style>标签里的$lib路径是静态编译解析的，一旦把<style>包在{#if}这类条件块里，编译器会跳过静态解析步骤，运行时$lib不会被替换成正确的构建路径，自然找不到图片资源。

可行解决方案（无需拆分组件） #

方案1：CSS变量动态切换（推荐） #

通过脚本导入图片获取正确URL，绑定为CSS变量，静态<style>里用变量引用：

<script>
  // 导入图片，让Vite自动处理路径转换
  import logoA from '$lib/assets/ezzeddin-logo-minified.png';
  import logoB from '$lib/assets/other-logo.png';
  export let useLogoA = true;

  // 响应式切换背景图URL
  $: bgImageUrl = useLogoA ? logoA : logoB;
</script>

<!-- 将CSS变量绑定到目标元素 -->
<div style="--bg-img: url({bgImageUrl})" class="styled-box"></div>

<style>
  .styled-box {
    /* 通用样式 */
    width: 200px;
    height: 200px;
    background-size: cover;
    /* 通过CSS变量引用背景图 */
    background-image: var(--bg-img);
  }
</style>

方案2：类名切换 #

把不同背景图定义在独立类中，通过条件绑定类名实现切换，静态<style>里的$lib会被正常解析：

<script>
  export let useLogoA = true;
</script>

<!-- 条件绑定目标类名 -->
<div class="bg-box {useLogoA ? 'logo-a' : 'logo-b'}"></div>

<style>
  .bg-box {
    width: 200px;
    height: 200px;
    background-size: cover;
  }
  .logo-a {
    background-image: url('$lib/assets/ezzeddin-logo-minified.png');
  }
  .logo-b {
    background-image: url('$lib/assets/other-logo.png');
  }
</style>

方案3：内联样式直接绑定 #

如果样式逻辑简单，直接在元素上绑定backgroundImage属性：

<script>
  import logoA from '$lib/assets/ezzeddin-logo-minified.png';
  import logoB from '$lib/assets/other-logo.png';
  export let useLogoA = true;
</script>

<div style="
  width: 200px;
  height: 200px;
  background-size: cover;
  background-image: url({useLogoA ? logoA : logoB});
"></div>

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