Svelte批量加载图片构建后路径异常问题求助

我有一个Svelte 4组件，其中部分图片从指定文件夹批量加载，另有一张图片正常加载作为参考：

<script>
    import ImageThatWorks from "$lib/images/singles/image.jpg"

    const imagesBlob = import.meta.glob(`$lib/images/batch/*.{png,jpg}`)
    const imagesUrl = Object.keys(imagesBlob)
</script>

<div> 
    <img src={ImageThatWorks} alt='Image that works' width='300' />
    <div class="photogrid">
        {#each imagesUrl as imgUrl}
            <img src={imgUrl} />
        {/each}
    </div>
</div>

使用npm run dev（实际执行vite dev）运行开发模式时，所有图片都能正常显示，因为Vite开发模式会直接从原始位置加载资源。

但执行npm run build构建后，图片已成功复制到dist/assets文件夹，用npm run preview运行构建产物时，只有单张加载的ImageThatWorks能从dist/assets路径正常显示，批量加载的图片仍然调用原始路径src/lib/images，导致无法显示。

请问这是什么原因？批量加载图片时该怎么处理？

附带问题：如何在同一批量加载中同时处理图片的缩略图版本？

参考Vite配置文件：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import path from 'path'

export default defineConfig({
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  },
  resolve: {
    alias: {
      $lib: path.resolve('./src/lib')
    }
  },
  plugins: [
    svelte(),
  ]
})

直接用Object.keys(imagesBlob)拿到的是原始文件路径字符串，Vite在构建时不会自动替换这些字符串为打包后的资源路径。而单张图片的import语句会被Vite处理，自动将路径替换为打包后的dist/assets下的资源地址，所以能正常显示。

需要通过import.meta.glob的动态导入函数来获取打包后的真实资源路径，而不是直接用原始路径。修改组件代码如下：

<script>
    import ImageThatWorks from "$lib/images/singles/image.jpg"

    // 使用eager模式预加载所有图片，获取打包后的URL
    const imagesBlob = import.meta.glob(`$lib/images/batch/*.{png,jpg}`, { eager: true })
    // 从模块的default属性中提取真实资源地址
    const imagesUrl = Object.values(imagesBlob).map(module => module.default)
</script>

<div> 
    <img src={ImageThatWorks} alt='Image that works' width='300' />
    <div class="photogrid">
        {#each imagesUrl as imgUrl}
            <img src={imgUrl} alt="批量加载的图片" />
        {/each}
    </div>
</div>

关键说明 #

• 添加{ eager: true }选项：让Vite在构建时就预加载这些图片资源，而非按需异步加载
• 通过module.default获取资源URL：这是Vite处理静态资源后返回的打包后路径，开发、生产环境均能正确指向资源位置

假设缩略图命名规则为原图文件名-thumb.jpg/png（比如photo1.jpg对应photo1-thumb.jpg），可以通过匹配文件名批量加载原图和缩略图：

<script>
    // 匹配批量文件夹下的所有图片
    const allImages = import.meta.glob(`$lib/images/batch/*.{png,jpg}`, { eager: true })
    // 整理为{ original: url, thumb: url }的结构
    const imagePairs = {}

    for (const [path, module] of Object.entries(allImages)) {
        const fileName = path.replace(/^.*\/(.*)\./, '$1')
        if (fileName.includes('-thumb')) {
            // 处理缩略图，关联到对应原图
            const originalName = fileName.replace('-thumb', '')
            imagePairs[originalName] = { ...(imagePairs[originalName] || {}), thumb: module.default }
        } else {
            // 处理原图，初始化或更新对象
            imagePairs[fileName] = { ...(imagePairs[fileName] || {}), original: module.default }
        }
    }

    // 转换为数组方便遍历
    const imageList = Object.values(imagePairs)
</script>

<div class="photogrid">
    {#each imageList as img}
        <div class="photo-item">
            <img src={img.thumb} alt="缩略图" />
            <img src={img.original} alt="原图" />
        </div>
    {/each}
</div>

注意事项 #

• 确保缩略图命名规则统一，才能准确匹配原图
• 如果缩略图放在单独子文件夹（如batch/thumbs/），可调整glob规则为$lib/images/batch/**/*.{png,jpg}，再通过路径判断类型

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