Svelte中从readable store加载图片URL无法显示的正确实现方法

问题原因 #

$lib是SvelteKit提供的路径别名，只有在组件的模板或脚本代码中经过Svelte编译器处理时，才会被解析为实际文件路径。直接将$lib/xxx字符串存储在readable store中时，编译器不会对其进行解析，浏览器最终请求的是$lib/img/1.png这个不存在的路径，导致图片加载失败。

解决方案 #

方案一：使用static目录的绝对路径 #

将图片文件移动到项目的static/img目录下（无该目录则创建），然后修改store中的路径为根目录相对路径：

export const artPosts = readable([
    {
        "title": "Peak",
        "tools": ["Blender", "Photoshop"],
        "source": "/img/1.png",
        "alt": "A surreal neon 80's landscape"
    },
]);

SvelteKit会将static目录下的文件直接部署到网站根目录，浏览器可以通过/img/1.png直接访问到图片。

方案二：在组件中动态解析路径 #

如果不想移动图片文件，可在组件中通过import.meta.url解析$lib别名对应的实际路径：

<script>
    import { artPosts } from "../stores.js";

    const resolveLibPath = (path) => {
        return new URL(path, import.meta.url).href;
    };
</script>

{#each $artPosts as item}
    <div class="wrapper">
        <img src={resolveLibPath(item.source)} alt={item.alt} />
        <h2>{item.title}</h2>
    </div>
{/each}

resolveLibPath函数会将$lib/img/1.png转换为浏览器可识别的真实资源路径，确保图片正常加载。

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