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加载程序）的方法。

图像循环在React JS中不起作用？

1 个答案: