ReactJS - Loop the src of an image inside a map

Question

I have an image inside a .map, and I want at every loop to change the src of this image

My images are in a folder, to import all of them it would be like this :

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

How can I import all the images at once, and then put them inside the src of the image inside of the map?

I created 3 arrays (const metrosLines, const rersLines, const tramwaysLines) with the names of the images inside the "metros" folder

Here's my code and the src to loop on is where I wrote "I WANT TO LOOP THIS 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>
);

EDIT: I succeeded to do the loop

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

but every loop result is put next to the previous, so the src of the image is 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"

Tony Bui · Accepted Answer · 2018-12-25 14:32:37Z

1

This is my code, hope it fix your problem.

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

edited Dec 25, 2018 at 14:32

answered Dec 24, 2018 at 23:26

Tony Bui

1,3079 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

VersifiXion Over a year ago

hello, I did what you wrote, the problem is that I have all the images in each <img src=""> instead of having the 1st image fot the 1st <img src="">, the second image for the second <img src=""> etc etc... but it helped a bit

VersifiXion Over a year ago

do you see the {metrosImages} inside the <Media left></Media> ? If I find a wayto put {metrosImages[0]} in the first loop, then {metrosImages[1]}, it will work

Tony Bui Over a year ago

I just edit the code a little bit, hope it look like your expectation!!!

VersifiXion Over a year ago

everything works, thank you for the time you spent for me !

VersifiXion Over a year ago

I just did it !

Collectives™ on Stack Overflow

ReactJS - Loop the src of an image inside a map

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related