SvelteKit技术问题：如何使用JSON文件导入的资源路径？

针对你遇到的生产构建时图片路径报错问题，核心原因是SvelteKit（基于Vite）在生产构建时会对src目录内的资源进行哈希重命名，直接通过JSON存储的静态路径无法匹配到构建后的资源路径，以下是几种可行的解决方法：

方法一：将图片放入static目录 #

1. 在项目根目录创建static/images（或自定义结构），把所有图片移到这个目录下
2. 修改Images.json里的Path字段为根相对路径，比如"/images/your-image.jpg"
3. 组件中直接使用即可——static目录下的资源会被原样复制到构建产物的根目录，路径不会被修改：

   <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" />
                   </figure>
               </div>
           </div>
       </div>
   </div>
   

方法二：通过导入方式处理src目录内的图片 #

如果图片必须放在src目录下，需要让Vite追踪资源依赖，确保构建时生成正确的路径：

静态导入（适合少量图片） #

<script>
    import Images from "/src/contentrain/Images/Images.json";
    // 直接导入对应图片，Vite会自动处理路径
    import targetImage from "/src/contentrain/Images/[你的图片文件名]";
</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={targetImage} draggable="false" alt="img" class="rounded-xl" />
                </figure>
            </div>
        </div>
    </div>
</div>

动态导入（适合大量图片） #

如果JSON里包含大量图片路径，可以用动态导入批量处理：

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

    // 根据文件名动态导入图片（假设JSON的Path字段仅存文件名，如"img12.jpg"）
    const getImageUrl = async (fileName) => {
        const module = await import(`/src/contentrain/Images/${fileName}`);
        return module.default;
    };
</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">
                    {#await getImageUrl(Images[12].Path)}
                        <div>加载中...</div>
                    {:then imageUrl}
                        <img src={imageUrl} draggable="false" alt="img" class="rounded-xl" />
                    {/await}
                </figure>
            </div>
        </div>
    </div>
</div>

注意事项 #

• 不要在src目录内使用绝对路径直接引用资源，必须通过导入让Vite处理
• 生产构建前可运行npm run build，查看build目录内的资源结构，确认路径是否匹配

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