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。

posted @ 2022-02-28 10:05  Feng1024  阅读(1003)  评论(0编辑  收藏  举报