How can I reference photos in a folder locally in react?

Question

I have a folder structure like the one below:

Src
 Assets
   Images
 Components
   Information
     Lines

And I'm going to use all the photos in the image folder I tried the following method but got no answer:

let array = [];
for (let i=1 ; i < 21 ; i++) {
    array.push(
        <img src={require(`../../Assets/Images/Line${i}.JPG`)} alt=""/>
    )
}

I have twenty pictures with the following names:

Line1.JPG
Line2.JPG
.
.
.
Line20.JPG

Assuming you're using `webpack` you can do it with the help of this [https://stackoverflow.com/q/42118296/10422291] — Rishabh Anand, Nov 13 '20 at 06:24

score 0 · Answer 1 · answered Nov 13 '20 at 12:02

In order to deal with this situation, we can use some third-party components. The first library is the babel-plugin-root-import, which allows us to import components using root-based paths.

Install

npm install babel-plugin-root-import --save-dev

Custom root

const rootImportOpts = {
  root: __dirname,
  rootPathPrefix: '~/',
  rootPathSuffix: 'src/js',
};
module.exports = {
  plugins: [['babel-plugin-root-import', rootImportOpts]],
};


babel.config.js


const rootImportOpts = {
      root: __dirname,
      rootPathPrefix: '~/',
      rootPathSuffix: 'src/Assets',
    };
    
        module.exports = (api) => {
          api.cache(true);
        
          const plugins = [['babel-plugin-root-import', rootImportOpts]];
        
          return { plugins };
        };

now you can use like this:

<img src={require(`~/your-image-name`)} alt=""/>

for more information you can visit babel-plugin-root-import github.

This second we need to install is the react-app-rewired. This component allow us to change webpack configuration without using ‘eject’ and without creating a fork of the react-scripts

How can I reference photos in a folder locally in react?

1 Answers1