动态访问react中的映像

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>
))}