Image loop is not working in react js?

Images loop is not working. loop is working, but shows the string data a,b,c not the image source file. How can i show the images?

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




1 Answer
1

You need to map the original array, rather than push to it:

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


It's also unclear why you looped from 0 to this.props.level, but I hope this answer offers you some guidance.

Also, as Lazar mentioned in a comment, you'll need to have a way for Webpack to handle your .jpg files, such as the file-loader loader.

file-loader

require("./icons/"+ name +".jpg")

require("./icons/"+ names +".jpg")

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.