CODEWITHSUNDEEP
javascriptreactjsecmascript-6
user12206766
user12206766

Reputation:

How to loop images using map method in react?

I am working on react project in that I have App.js that is parent for Child.js. In my project I have public folder In that I have assets folder in that I have images folder in this folder I have all images. I am trying to loop all these images. But it is showing syntax error.

The error is shown like this

./src/App/App.js Module not found: Can't resolve '.public/assets/images' in src/App/App.js

This is App.js

import React from 'react';
import './App.css';

function Employers() {
    return (
        <div className='container-fluid'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Main'>
                       <Child></Child>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default App

This is Child.js

import React from 'react';


function Child() {
    const imageShell = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'tweleve', 'thirteen', 'fourteen', 'fifteen', 'sixteen'];
    const loopImages = imageShell.map(function (images, i) {
        return <img src={require(".public/assets/images/" + images + ".jpg")} alt='imageLooping'></img>
    });
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='imageClassOne'>
                        {loopImages}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Child

You think I am not clear with my doubt please put a comment

Upvotes: 0

Views: 266

Answers (1)

Vencovsky
Vencovsky

Reputation: 31693

I think you have a typo

You forgot a /

// forgot / here
require("./public/assets/images/" + images + ".jpg")

Upvotes: 2

Related Questions