在运行时使用 es6 import 或 require 导入图像

Question

我有这个图片文件夹：

- country
  - EN
  - FR
  - IT

我想以这种方式导入图像：

import image from "./country/{country}/test.png";

我该怎么做？

Answer 1

我将始终使用这两种方法 (require, import)。 第一件事是我以两种方式对图像进行分类：

1. 我使用的东西可能会经常使用。
2. 很少使用的东西。

然后我将创建一个 js 文件，其中我会导入所有第一种图像（经常使用）。当项目将加载时，它将首先执行所有导入语句，以便我的所有图像都已导入，所以每当我需要这些图像时，我都会从我为导入图像创建的实用程序中获取该图像。该实用程序文件将是这样的：

import CSK from "../assets/images/teamLogo/CSK.png";
import CSK_bw from "../assets/images/teamLogo/CSK-bw.png";

export function getImage(name) {
  switch (name) {
    case "CSK":
      return CSK;
    case "CSK_bw":
      return CSK_bw;
    }
  }

所以每当我需要图像时，我只需使用图像名称导入上述函数。

我将根据需要使用第二类图像。