Webpack not loading image extensions

Question

How can I be able to make webpack load my image extension? I have images inside the scr folder as follows

src/images/logo.png
scr/images/pic1.png

i am calling them in my html file as follows

<img src="images/logo.png" class="img-responsive" alt="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Work Title">

My webpack configuration is as follows.

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                use: [
                    'file-loader?name=images/[name].[ext]'
                ]
            },
            {
                test: /\.png$/,
                use: [
                    'file-loader?name=images/[name].[ext]'
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ]
};

however, when i try running the application, I get the following error.

> wakili101@1.0.0 start /home/karanu/Documents/wakili101
> webpack-dev-server --open --mode development

ℹ ｢wds｣: Project is running at http://localhost:8082/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 51a9c30e9d6832d4b753
Version: webpack 4.28.4
Time: 2451ms
Built at: 01/16/2019 3:47:58 AM
                Asset        Size  Chunks             Chunk Names
         ./index.html  1020 bytes          [emitted]
images/wakililogo.png    67 bytes          [emitted]
              main.js     1.2 MiB    main  [emitted]  main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:8082 ./src 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/events/events.js] 8.13 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8082] (webpack)-dev-server/client?http://localhost:8082 7.78 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/index.js] 72 bytes {main} [built]
[./src/js/components/container/FormContainer.jsx] 3.66 KiB {main} [built]
    + 26 hidden modules

ERROR in   Error: Child compilation failed:
  Module not found: Error: Can't resolve './images/wakililogo' in '/home/karanu/Documents/wakili101/src':
  Error: Can't resolve './images/wakililogo' in '/home/karanu/Documents/wakili101/src'

  - compiler.js:79 childCompiler.runAsChild
    [wakili101]/[html-webpack-plugin]/lib/compiler.js:79:16

  - Compiler.js:300 compile
    [wakili101]/[webpack]/lib/Compiler.js:300:11

  - Compiler.js:556 hooks.afterCompile.callAsync.err
    [wakili101]/[webpack]/lib/Compiler.js:556:14


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [wakili101]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:553 compilation.seal.err
    [wakili101]/[webpack]/lib/Compiler.js:553:30


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [wakili101]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1323 hooks.optimizeAssets.callAsync.err
    [wakili101]/[webpack]/lib/Compilation.js:1323:35



Child html-webpack-plugin for "index.html":
                    Asset      Size  Chunks             Chunk Names
    images/wakililogo.png  67 bytes          [emitted]
     + 1 hidden asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 22.3 KiB {0} [built]
    [./src/images/wakililogo.png] 67 bytes {0} [built]

    ERROR in ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html)
    Module not found: Error: Can't resolve './images/wakililogo' in '/home/karanu/Documents/wakili101/src'
     @ ./src/index.html (./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html) 1:16387-16417
ℹ ｢wdm｣: Failed to compile.

I have tried changing the location of my images. that has not worked. I have tried changing my images from png to jpeg and vice versa but that has not worked either.

score 1 · Answer 1 · answered Jan 16 '19 at 08:42

1

Try url loader as Hisagr said but additionally you should not use <img src="images/logo.png"/> when you wanted to add image in your react project. You should use <img src={require('images/logo.png')} />. I hope this helps.

answered Jan 16 '19 at 08:42

Isa Gul

56
3

score 0 · Answer 2 · answered Jan 16 '19 at 04:38

0

Try url-loader instead of file-loader:

{
  test: /\.png$/,
  use: 'url-loader'
},

answered Jan 16 '19 at 04:38

Hisagr

601
6
13

Webpack not loading image extensions

2 Answers2