Dynamically import images from a directory using webpack

by

I feel like there must be some way to dynamically import all files from a specific directory as their name sans extension, and then use those files as needed.

Not in ES6. The whole point of import and export is that dependencies can be determined statically, i.e. without executing code.

But since you are using webpack, have a look at require.context . You should be able to do the following:

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

More Related Contents:

  1. How to import and export components using React + ES6 + webpack?
  2. How to tell webpack dev server to serve index.html for any route
  3. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  4. Uncaught TypeError: Cannot read property ‘state or props’ of undefined
  5. What’s the difference between “super()” and “super(props)” in React when using es6 classes?
  6. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  7. Programmatically navigate using react router V4
  8. ReactJS giving error Uncaught TypeError: Super expression must either be null or a function, not undefined
  9. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  10. Dynamically Add Images React Webpack
  11. mobx-react observer don’t fires when I set observable
  12. When should I use brackets with imports
  13. In React ES6, why does the input field lose focus after typing a character?
  14. Remove console.logs with Webpack & Uglify
  15. Updating React state when state is an array of objects
  16. How to use Google fonts in React.js?
  17. Unexpected block statement surrounding arrow body
  18. ReactJS with ES6: this.props is not a function when I communicate two components
  19. Nextjs: Unable to load images from static folder
  20. How to hash CSS class names in Nextjs?
  21. Difference between import React and import { Component } syntax [duplicate]
  22. How to minimize the size of webpack’s bundle?
  23. How to set build .env variables when running create-react-app build script?
  24. How to assign the correct typing to React.cloneElement when giving properties to children?
  25. What is the expected return of `useEffect` used for?
  26. Importing images breaks jest test
  27. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  28. How to bundle a React app to a subdirectory on a server?
  29. Put A Warning If Page Refresh in ReactJS
  30. Unable to load images from static folder

Leave a Comment