SvelteKit：如何使用通过JSON文件导入的资源路径？

Question

我正在尝试构建用于生产的 SvelteKit 应用程序，但我在使用图像资源时遇到问题。

我有一个指向所有资产路径的 Json 文件，我正在将其导入到我的 Svelte 组件中。

是我得到的错误。

我想这样使用它们：

<script>
    import Images from "/src/contentrain/Images/Images.json";  
</script>

<div class="hero-items">
    <div class="hero">
        <div class="hero-content flex-col lg:flex-row z-20">
            <div class="card bg-base-100 p-10">
                <figure class="px-10 pt-10">
                    <img src={Images[12].Path} draggable="false" alt="img" class="rounded-xl" />

有人可以教我有关资产路由的知识吗？

Answer 1

如果您不是直接导入资源，Vite 构建时不会将其复制到资源文件夹中。举个例子：

如果你不这样做：

import myImage from "/src/somefolder/myImage.png";

那么用Vite构建后

myImage.png

将不会出现在输出文件夹中。

此外，路径发生变化。这意味着您在开发时需要一个 JSON 作为路径，在部署时需要另一个 JSON 作为路径。

既然你不想放弃你的

Images.json

文件，我建议：

1. 您将图像移动到

   static

   文件夹，该文件夹的内容应复制到您网站的根目录。
2. 您对自己的配置很满意。您可以使用 wj-config 创建每个环境的配置对象，这些对象将根据指定的环境自动更改。