Webpack not loading png images

Question

I have few images in src folder:

src/img/favicon.png
src/img/profpic.png

In index.html file I will point as

    <link rel="shortcut icon" href="img/favicon.png" />

In some html files I will point as

    <img src="img/profpic.png" />

I am trying to load images, fonts via webpack. Below is my webpack.config

module.exports = {
    context: path.resolve('src'),
    entry: {
        app: ["./index.ts"]
    },
    output: {
        path: path.resolve('build'),
        filename: "appBundle.js"
    },
    devServer: {
        contentBase: 'src'
    },
    watch: true,
    module: {
        preLoaders: [
            {
                test: /\.ts$/,
                loader: "tslint"
            }
        ],
        loaders: [
                    {test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']},
                    {
                        test: /\.css$/,
                        loader: 'style-loader!css-loader'
                    },
                    {
                        test: /\.scss$/,
                        loader: 'style!css!sass'
                    }, {
                        test: /\.html$/,
                        exclude: /node_modules/,
                        loader: 'raw'
                    }, {
                        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                        loader: 'url-loader?limit=1000000&mimetype=application/font-woff'
                    }, {
                        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                        loader: 'file-loader'
                    }, {
                        test: /\.json$/,
                        loader: "json-loader"
                    }, {
                        test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'
                    }
                ];
    }
    plugins: [          
        new HtmlWebpackPlugin({
            template: './index.html',
            inject: 'body',
            hash: true
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.jquery': 'jquery'
        })
    ],
    resolve: {
        extensions: ['', '.js', '.es6', '.ts']
    }
}

Trying to load the images/fonts to webpack output folder. Its not throwing any error. Its successfully building but in build which is my webpack output folder font is loading fine but images are not loading

How is your HTML file passed to webpack? You need to use the html-loader when feeding HTML files to webpack. — Johannes Ewald, Sep 06 '16 at 13:05
@jhnns everything in appbundle.js, which will be loaded in index.html — ShaMoh, Sep 06 '16 at 13:09
Try to post a minimal demo of your application where you try to load the HTML with the images. Remove all the other stuff and chances are that someone can answer your question. — Johannes Ewald, Sep 06 '16 at 13:11
Yeah, more info would be useful. It's hard to say anything concrete based on the current information. — Juho Vepsäläinen, Sep 06 '16 at 13:21

score 5 · Accepted Answer · answered Sep 07 '16 at 09:37

Changing the raw loader to html loader for html done the trick. Below is my changes

{test: /\.ts(x?)$/, exclude: /node_modules/,loaders: ['ng-annotate-loader','ts-loader']},
{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
},
{
    test: /\.scss$/,
    loader: 'style!css!sass'
}, {
    **test: /\.html$/,
    exclude: /node_modules/,
    loader: 'html-loader'**
}, {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=1000000&mimetype=application/font-woff'
}, {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
}, {
    test: /\.json$/,
    loader: "json-loader"
}, {
    **test: /\.png$/, 
    exclude: /node_modules/,
    loader: 'file-loader?name=images/[name].[ext]'**
}

FYI: The use of `**` is markdown for bold. It appears to have been added to the above JSON as a way to highlight the two sections of changes. Markdown does not work within the context where it was used, so the bold markdown was shown instead. Just ignore all double asterisks. — r Blue, Mar 13 '23 at 14:17

Webpack not loading png images

1 Answers1