How to load image files with webpack file-loader

Question

I am using webpack to manage a reactjs project  I want to load images in javascript by webpack file-loader  Below is the webpack config js  const webpack   require  webpack    const path   require  path    const NpmInstallPlugin   require  npm-install-webpack-plugin     const PATHS         react  path join   dirname   node modules react dist react min js        app  path join   dirname   src        build  path join   dirname     dist       module exports         entry            jsx     app index jsx              output            path  PATHS build          filename   app bundle js              watch  true      devtool   eval-source-map       relativeUrls  true      resolve            extensions         js     jsx     css     less            modulesDirectories    node modules            alias                normalize css    dirname     node modules normalize css normalize css                        module            preLoaders                                   test     js                    loader   quot source-map-loader quot                                    loaders                                   test     html                    loader   file name  name   ext                                                 test     jsx                     exclude   node modules                   loader   babel-loader presets es2015                               test     css    loader   style-loader css-loader                 test      jpe g png gif svg   i  loader   quot file-loader name  public icons  name   ext  quot                                  test     js                    exclude   node modules                   loaders    babel-loader presets es2015                                      plugins            new webpack optimize UglifyJsPlugin               compress                    warnings  false                             output                    comments  false                                     new NpmInstallPlugin               save  true    --save                     new webpack DefinePlugin                quot process env quot                     NODE ENV  JSON stringify  quot production quot                                        devServer            colors  true          contentBase    dirname          historyApiFallback  true          hot  true          inline  true          port  9091          progress  true          stats                cached  false                    I used this line to load image files and copy them to dist public icons directory and keep the same file name   test      jpe g png gif svg   i  loader   quot file-loader name  public icons  name   ext  quot    But I have two problems when using it  When I run webpack command  the image file was copied to dist public icons  directory as expected  However it was also copied to dist directory with this file name  quot df55075baa16f3827a57549950901e90 png quot   Below is my project structure   Another problem is that I used below code to import this image file but it is not showing on the browser  If I am using url  public icons imageview item normal png  on the img tag  it works fine  How to use the object imported from the image file  import React   Component  from  react   import  render  from  react-dom   import img from  file       public icons imageview item normal png   export default class MainComponent extends Component      render         return          lt div style  styles container  gt          download          lt img src  img   gt         lt  div gt                const styles       container        width   100        height   100

User · Answer

Alternatively you can write the same like

{
    test: /\.(svg|png|jpg|jpeg|gif)$/,
    include: 'path of input image directory',
    use: {
        loader: 'file-loader',
        options: {
            name: '[path][name].[ext]',
            outputPath: 'path of output image directory'
        }
    }
}

and then use simple import

import varName from 'relative path';

and in jsx write like <img src={varName} ..../>

.... are for other image attributes

User · Answer

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   quot file-loader name  public icons  name   ext  quot        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  quot knows about quot   which is public icons  name   ext   aka  quot file-loader  name  public icons  name   ext  quot    Your output dir  quot dist quot  is unknown  You could solve this in two ways   Run all your code under the  quot dist quot  folder 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

User · Answer

This is my working example of our simple Vue component    lt template functional gt       lt div v-html  require    html-loader      svg logo svg    gt  lt  div gt   lt  template gt

User · Answer

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       lt div className  large-8 columns  gt          lt img  style    width  300  height  150    src  img    gt   lt  div gt

User · Answer

webpack config js        test      png jpe g gif   i      loader   file-loader       options            name    name   ext               anyfile html   lt img src  image name jpg    gt

User · Answer

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

[javascript] How to load image files with webpack file-loader

Examples related to javascript

Examples related to reactjs

Examples related to webpack