求助：如何在Vite中实现动态图片导入？

问题情况 #

1. 产品数据结构 #

{
    "id": 2,
    "slug": "xx59-headphones",
    "name": "XX59 Headphones",
    "image": {
      "mobile": "./assets/product-xx59-headphones/mobile/image-product.jpg",
      "tablet": "./assets/product-xx59-headphones/tablet/image-product.jpg",
      "desktop": "./assets/product-xx59-headphones/desktop/image-product.jpg"
    },
    "category": "headphones",
    "categoryImage": {
      "mobile": "./assets/product-xx59-headphones/mobile/image-category-page-preview.jpg",
      "tablet": "./assets/product-xx59-headphones/tablet/image-category-page-preview.jpg",
      "desktop": "./assets/product-xx59-headphones/desktop/image-category-page-preview.jpg"
    }
}

2. 项目目录结构 #

├── src
│   ├── App.css
│   ├── App.tsx
│   ├── Layouts
│   │   └── MaxWidthLayout.tsx
│   ├── assets
│   │   ├── audiophile.png
│   │   ├── cart
│   │   │   ├── image-xx59-headphones.jpg
│   │   │   ├── image-xx99-mark-one-headphones.jpg
│   │   │   ├── image-xx99-mark-two-headphones.jpg
│   │   │   ├── image-yx1-earphones.jpg
│   │   │   ├── image-zx7-speaker.jpg
│   │   │   └── image-zx9-speaker.jpg
│   │   ├── checkout
│   │   │   ├── icon-cash-on-delivery.svg
│   │   │   └── icon-order-confirmation.svg
│   │   ├── favicon-32x32.png
│   │   ├── home
│   │   │   ├── desktop
│   │   │   │   ├── [首页桌面端图片]

3. 尝试的代码及问题 #

最初用import.meta.url拼接路径，代码如下：

function getImgUrl(name: string) {
    let image = new URL(`/src/assets/${name}`, import.meta.url).href;
    console.log(image);
    return image;
};

return (
    <article className="p-5">
        <MaxWidthLayout>
            <div className="border-4 border-red-500">
                <aside className="border-4 border-blue-600">
                    <img src={getImgUrl(mobileImage)} alt="Detailed image product" />
                </aside>
                <aside className="border-4 border-green-600">
                    {/* 其他元素 */}
                </aside>
            </div>
        </MaxWidthLayout>
    </article>
)

生成的错误路径：http://localhost:5173/src/pages/ProductDetail/components/assets/product-zx9-speaker/mobile/image-category-page-preview.jpg，未指向正确的src/assets目录。

修改后的代码仍无法渲染图片，且无报错：

function getImgUrl(name: string) {
    let image = new URL(`${name}`, import.meta.url).href;
    let splittedImage = image.split('/pages/ProductDetail/components').join('');
    console.log(splittedImage)
    return splittedImage;
};

解决方案 #

方案1：修正new URL路径拼接逻辑 #

Vite中import.meta.url指向当前组件文件的URL，直接拼接会导致路径偏移。正确做法是清理传入路径的前缀，再基于项目根目录拼接：

function getImgUrl(path: string) {
    // 移除路径开头的"./"，避免相对路径混乱
    const cleanPath = path.replace(/^\.\//, '');
    // 基于项目根目录拼接正确路径
    return new URL(`/src/${cleanPath}`, import.meta.url).href;
}

比如传入./assets/product-xx59-headphones/mobile/image-product.jpg，处理后会生成正确的http://localhost:5173/src/assets/product-xx59-headphones/mobile/image-product.jpg。

方案2：用Viteimport.meta.glob预加载图片 #

如果所有产品图片都在src/assets/product-*目录下，可批量预加载图片，彻底避免路径问题：

// 预加载所有产品图片，eager设为true表示立即加载，as: 'url'返回图片URL
const productImages = import.meta.glob('/src/assets/product-**/*.jpg', { eager: true, as: 'url' });

function getImgUrl(path: string) {
    // 将传入的"./assets/..."转为"/src/assets/..."，匹配预加载的key
    const imageKey = path.replace(/^\.\//, '/src/');
    // 返回对应图片URL，无匹配则返回空字符串
    return productImages[imageKey] || '';
}

Vite会在构建阶段自动处理所有匹配的图片，生成正确的资源路径。

排查步骤 #

1. 打印mobileImage变量值，确认传入的路径字符串是否正确。
2. 复制生成的图片URL到浏览器地址栏，若返回404则说明路径错误，需核对文件实际位置。
3. 检查图片文件名、文件夹名的大小写（Linux/macOS环境区分大小写），确保和代码中的路径完全一致。

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