在反应中动态访问图像

Question

我正在导入一个图像以供以后使用，就像这样 import S1 from '../../assets/images/S1.svg';

然后我通过一个数组进行映射，并希望动态访问此导入。我怎样才能成功地做到这一点？

循环在这里：

{characteristics.map(characteristic => (
          <div className="characteristic" key={characteristic.key}>
            <span className="characteristicKey"><img src={characteristic.key} alt={characteristic.label} /></span>
            <span className="characteristicLabel">{characteristic.label}</span>
          </div>
        ))}

Answer 1

您可以为具有特征的文件指定相关名称，例如 c1.svg 、 c2.svg 、 c3.svg ...

然后在你的地图中：

{characteristics.map((characteristic,i) => (
          <div className="characteristic" key={characteristic.key}>
            <span className="characteristicKey"><img src={require("c"+i+1+".svg")} alt={characteristic.label} /></span>
            <span className="characteristicLabel">{characteristic.label}</span>
          </div>
        ))}