Question

我在.map中有一个图片，我想在每个循环中更改该图片的src

我的图像位于一个文件夹中，要导入所有图像，就像这样：

const firstImage = require(`../../../images/metros/1.svg`);
const secondImage = require(`../../../images/metros/2.svg`);
const thirdImage = require(`../../../images/metros/3.svg`);

如何一次导入所有图像，然后将其放入地图中图像的src中？

我用“ metros”文件夹中的图像名称创建了3个数组（const metrosLines，const rersLines，const tramwaysLines）

这是我的代码，要循环播放的src是我写的“我想循环使用此SRC->”

const { transport, data } = this.props;
const transportImage = require(`../../../images/${transport}/${transport}.svg`);
const metrosLines = ['1', '2', '3', '3bis', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'];
const rersLines = ['a', 'b', 'c', 'd', 'e'];
const tramwaysLines = ['1', '2', '3a', '3b', '5', '6', '7', '8'];
const displayTrafic = data.map(line =>
    <Col xs="12" sm="12" md="6" key={line.line}>
        <Media>
            <Media left>
                <Media object data-src="holder.js/64x64" (I WANT TO LOOP THIS SRC ->) src={ metrosImages } alt="Logo ligne RATP" />
            </Media>
            <Media body>
                <Media heading>
                    {line.title}{line.slug === "normal" ? <i className="fas fa-check green"></i> : <i className="fas fa-times red"></i>}
                </Media>
                {line.message}
            </Media>
        </Media>
    </Col>
);

编辑：我成功完成了循环

const metrosImages = metrosLines.map((line) => {
        for (let i = 0; i < metrosLines.length; i++) {
            const importMetroImage =  require(`../../../images/${transport}/${metrosLines[i]}.svg`);
            return importMetroImage;
        }
    });

，但是每个循环结果都放在前一个结果的旁边，因此图像的src是 src =“ / static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg ，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg ，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg ，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg，/ static / media / 1.68dded27.svg”

Answer 1

这是我的代码，希望它可以解决您的问题。

const displayTrafic = data.map((line, i) =>{
      const metrosLines = ['1', '2', '3', '3bis', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'];
      const importMetroImage =  require(`../../../images/${transport}/${metrosLines[i]}.svg`);
      const componentImage = <Media object data-src="holder.js/64x64"  src= {importMetroImage}  alt="Logo ligne RATP" />;
      return (
          <Col xs="12" sm="12" md="6" key={line.line}>
            <Media>
                <Media left>
                  {componentImage}
                </Media>
                <Media body>
                    <Media heading>
                        {line.title}{line.slug === "normal" ? <i className="fas fa-check green"></i> : <i className="fas fa-times red"></i>}
                    </Media>
                    {line.message}
                </Media>
            </Media>
          </Col>
      )
    }
    );

ReactJS-在地图内循环显示图像的src

1 个答案: