图像循环在 react js 中不起作用?

Question

图像循环不起作用。 循环工作正常，但显示字符串数据 a、b、c 而不是图像源文件。如何显示图像？

import React, { Component } from 'react';
import './Image.css';
export default class Imgs extends Component {
render() {
const names = ['a', 'b', 'c'];
for (let i = 0; i < this.props.level; i++) {
names.push(<img src={require("./icons/"+names+".jpg")} alt="" className="img-responsive" key={i} />  );
}
return (
<div>
<div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
{names}
</div>
</div>
)
}
}

Answer 1

您需要映射原始数组，而不是推送到它：

const names = ['a', 'b', 'c'];
const imgs = names.map(function(name, i) {
return <img src={require("./icons/"+ name +".jpg")} alt="" className="img-responsive" key={i} />  
});
return (<div>{imgs}</div>);

也不清楚你为什么从0循环到this.props.level，但我希望这个答案能给你一些指导。

此外，正如 Lazar 在评论中提到的，您需要有一种方式让 Webpack 来处理您的.jpg文件，例如file-loader加载器。