Dynamic import images from folders

Question

Using webpack I can import images from a folder

    let i = 0; 
    const imgs =[];
    let img;    
    for(i=0;i<3;i++){
    img = require( '../Resources/OtherProjects/'+props.type+'/'+i+'.jpg' );
    imgs.push(img);
    }

where props.type gives me a different folder to create an array for each folder in my dynamic component

my question is : there is a better way?
also , there is a way to get how many images are in my folder?

require.context only works for an specific folder , but not for each folder

score 0 · Accepted Answer · answered Jul 02 '20 at 04:56

You can use alias to provide aliases for your srcor any directory in your root folder.

Sample tsconfig.json file

const {alias, configPaths} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias({
    ...configPaths('tsconfig.paths.json')
  })(config)

  return config
}

tsconfig.paths.json

/* tsconfig.paths.json */
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

and modify your package.json to this:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

You may also refer to this for more information.

Dynamic import images from folders

1 Answers1