React：通过vite批量导入图片

注意：以下方法只有在通过vite作为构建工具时，可以使用

场景

开发React Web项目时，在本地放了很多张图片，并且在组件中使用。

笨方法

复制import imgA from './images/a.png'

<img src={imgA} alt=""> 

当存在很多张图片时，一张张导入会很费时间。新增、删除图片也很不方便。

解决方案

复制function getImage(src: string, alt: string) {
  const path = `${src}`;
  const modules = import.meta.globEager("../../assets/category/*.png");
  return { src: modules[path].default, alt: alt };
}

const categoryImages = [
  getImage("../../assets/category/dianshi.png", "电视"),
  getImage("../../assets/category/bingxiang.png", "冰箱"),
  getImage("../../assets/category/binggui.png", "冰柜")
];

<div>
      {categoryImages.map((item) => (
        <div>
         <img src={item.src} alt={`A Image of ${item.alt}`} />
          <span>{item.alt}</span>
        </div>
      ))}
</div>

此解决方案只需要新增『图片链接』，无需其他修改。

方案问题：此方案不优雅，import.meta.globEager不允许传入变量，且每次调用getImage均会调用globEager。

推荐方案：上传图片到CDN。

• 方案来源：https://vitejs.cn/guide/assets.html