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