javascript – How to load image files with webpack file-loader

javascript – How to load image files with webpack file-loader

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 doesnt 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
},

I had an issue uploading images to my React JS project. I was trying to use the file-loader to load the images; I was also using Babel-loader in my react.

I used the following settings in the webpack:

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

This helped load my images, but the images loaded were kind of corrupted. Then after some research I came to know that file-loader has a bug of corrupting the images when babel-loader is installed.

Hence, to work around the issue I tried to use URL-loader which worked perfectly for me.

I updated my webpack with the following settings

{test: /.(jpe?g|png|gif|svg)$/i, loader: url-loader?name=app/images/[name].[ext]},

I then used the following command to import the images

import img from app/images/GM_logo_2.jpg
<div className=large-8 columns>

      <img  style={{ width: 300, height: 150 }} src={img} />
</div>

javascript – How to load image files with webpack file-loader

Install file loader first:

$ npm install file-loader --save-dev

And add this rule in webpack.config.js

           {
                test: /.(png|jpg|gif)$/,
                use: [{
                    loader: file-loader,
                    options: {}
                }]
            }

Leave a Reply

Your email address will not be published.