SvelteKit中如何用JSON对象中的变量作为图片源？

问题核心在于SvelteKit的资源编译机制：$lib这类路径别名是Vite在静态编译阶段处理的，只有直接写在模板或静态导入里的路径会被解析成实际的资源URL。而你存在JSON里的路径是动态字符串，Vite无法提前识别并解析这个别名，最终浏览器拿到的是原始的$lib/assets/images/test.jpg，自然找不到对应资源。

以下是几种可行的解决方案：

• 方案1：使用相对根目录路径 + import.meta.url解析
  把JSON里的路径改成项目根目录的相对路径（比如/src/lib/assets/images/test.jpg），然后用new URL()结合import.meta.url动态解析：

  <script lang="ts">
    // 假设你的JSON对象
    const j_obj = { img_url: '/src/lib/assets/images/test.jpg' };
    // 解析为可访问的资源URL
    const resolvedImgUrl = new URL(j_obj.img_url, import.meta.url).href;
  </script>
  
  <img alt="The project logo" src={resolvedImgUrl} style="width:50%;height:100%"/>
  

• 方案2：保留$lib别名，手动替换解析
  如果不想修改JSON里的路径，可以先把$lib替换成实际的相对路径，再解析：

  <script lang="ts">
    const j_obj = { img_url: '$lib/assets/images/test.jpg' };
    // 替换$lib为/src/lib（对应项目中lib目录的实际位置）
    const relativePath = j_obj.img_url.replace('$lib', '/src/lib');
    const resolvedImgUrl = new URL(relativePath, import.meta.url).href;
  </script>
  
  <img alt="The project logo" src={resolvedImgUrl} style="width:50%;height:100%"/>
  

• 方案3：提前导入图片，用映射表匹配
  如果是批量图片场景，可以先导入所有需要的图片，在JSON里存储图片的标识，再通过映射表获取实际URL：

  <script lang="ts">
    // 提前导入需要的图片
    import testImg from '$lib/assets/images/test.jpg';
    import otherImg from '$lib/assets/images/other.jpg';
  
    // JSON里存储图片的标识
    const j_obj = { img_key: 'testImg' };
    // 建立标识和图片URL的映射
    const imgMap = { testImg, otherImg };
  </script>
  
  <img alt="The project logo" src={imgMap[j_obj.img_key]} style="width:50%;height:100%"/>
  

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