在reactjs中动态导入图像资产

Question

我在reactjs中有一个组件，所有图像都导入为

import client01 from '../../assets/images/site/client-01.png';
import client02 from '../../assets/images/site/client-02.png';
import client03 from '../../assets/images/site/client-03.png';
import client04 from '../../assets/images/site/client-04.jpg';
import client05 from '../../assets/images/site/client-05.jpg';
import client06 from '../../assets/images/site/client-06.jpg';

并且在代码中用作

<img src={client05} alt="client_5" />

我的问题是，如果要从api获取这些值，那么应该如何加载图像。例如，>

{
  "web-data": {
    "Asset": {
      "client01": "../../assets/images/site/client-01.png",
      "client02": "../../assets/images/site/client-02.png",
      "client03": "../../assets/images/site/client-03.png",
      "client04": "../../assets/images/site/client-04.png",
      "client05": "../../assets/images/site/client-05.png"
    }
  }
}
并且我得到了这些值并将其存储在本地状态中，如何将这些图像导入我的reactjs组件中？

我在reactjs中有一个组件，所有图像都是从'../../assets/images/site/client-01.png'作为导入client01导入的；从'../../assets/images/site/client-02.png'导入client02;导入client03 ...

Answer 1

您可以使用require方法代替import

Answer 2

您可以在加载组件并将它们保存为组件状态时获取它们。在这两者之间，您可以向用户显示装载程序微调器：