How to load image files with webpack file-loader

by

Regarding problem #1

Once you have the file-loader configured in the webpack.config, whenever you use import/require it tests the path against all loaders, and in case there is a match it passes the contents through that loader. In your case, it matched

{
    test: /\.(jpe?g|png|gif|svg)$/i, 
    loader: "file-loader?name=/public/icons/[name].[ext]"
}

// For newer versions of Webpack it should be
{
    test: /\.(jpe?g|png|gif|svg)$/i, 
    loader: 'file-loader',
    options: {
      name: '/public/icons/[name].[ext]'
    }
}

and therefore you see the image emitted to

dist/public/icons/imageview_item_normal.png

which is the wanted behavior.

The reason you are also getting the hash file name, is because you are adding an additional inline file-loader. You are importing the image as:

'file!../../public/icons/imageview_item_normal.png'.

Prefixing with file!, passes the file into the file-loader again, and this time it doesn’t have the name configuration.

So your import should really just be:

import img from '../../public/icons/imageview_item_normal.png'

Update

As noted by @cgatian, if you actually want to use an inline file-loader, ignoring the webpack global configuration, you can prefix the import with two exclamation marks (!!):

import '!!file!../../public/icons/imageview_item_normal.png'.

Regarding problem #2

After importing the png, the img variable only holds the path the file-loader “knows about”, which is public/icons/[name].[ext] (aka "file-loader? name=/public/icons/[name].[ext]"). Your output dir “dist” is unknown.
You could solve this in two ways:

  1. Run all your code under the “dist” folder
  2. Add publicPath property to your output config, that points to your output directory (in your case ./dist).

Example:

output: {
  path: PATHS.build,
  filename: 'app.bundle.js',
  publicPath: PATHS.build
},

More Related Contents:

  1. styled components final styles are injected directly in DOM with tag, with style tag injection does performance gets affected?
  2. The create-react-app imports restriction outside of src directory
  3. Correct path for img on React.js
  4. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  5. ES6 modules implementation, how to load a json file
  6. How to import image (.svg, .png ) in a React Component
  7. firebase.auth is not a function
  8. When should I use brackets with imports
  9. How to store Configuration file and read it using React
  10. where is create-react-app webpack config and files?
  11. Importing CSS files in Isomorphic React Components
  12. Webpack output is empty object
  13. Webpack breaking change
  14. Is it possible to use dotenv in a react project?
  15. “You may need an additional loader to handle the result of these loaders.”
  16. how to set up an inline svg with webpack
  17. Electron IPC and nodeIntegration
  18. Webpack 5 – Uncaught ReferenceError: process is not defined
  19. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  20. React JS Server side issue – window not found
  21. Why is my webpack bundle.js and vendor.bundle.js so incredibly big?
  22. how can I use top level “await” in typescript next.js
  23. How can I fix the “BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default" error?
  24. How to dynamically import SVG and render it inline
  25. Remove duplicate from array within array
  26. Get viewport/window height in ReactJS
  27. What is {this.props.children} and when you should use it?
  28. Render Object properties in React
  29. Why React Hook useState uses const and not let
  30. How target DOM with react useRef in map

Leave a Comment