Webpack and Angular HTML image loading

Question

I have been breaking my head with webpack and angular. This might have a simple answer but I cant figure it out. I have read almost every answer here in stack overflow on this topic to no avail.

I have an html page like this (also other template that have images):

<body>
    <img ng-src="../images/angular-webpack.png">

    <md-button class="md-primary md-raised">
        Button
    </md-button> 
</body>

I also have a webpack config:

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');

module.exports = {
    context: path.resolve(__dirname + '/src'),
    entry: ['./js/core/app.module.js'],
    output: {
        path: './release',
        publicPath:'/',
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
                test: /\.html/,
                exclude: 'node_modules',
                loader: 'raw-loader'
            },
            {
                test: /\.css/,
                exclude: 'node_modules',
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.(jpe?g|png)$/i,
                exclude: 'node_modules',
                loader: 'url-loader?limit=8192!img'
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new CopyWebpackPlugin([
            {from: './index.html', to: './index.html'}
        ], {
            ignore: [
                '*.txt',
                {glob: '**/*', dot: true}
            ]
        })
    ],
    devServer: {
        contentBase: './release'
    },
    watch: true
};

...but i do not see my images loading. I have tried url-loader, file-loader with publicPath and without it. I am confused, I do not know how to format the webpack config or the html image tag for it to work.

Anyone has any experience on getting images to work with webpack? Also I do not want to include my images in the controllers or any other js file. I want the images to be declared in the html page.

Johannes Ewald · Accepted Answer · 2016-02-16 12:11:35Z

8

The raw-loader is supposed to turn a text file into a CommonJS module that exports the file contents as a string – nothing more.

If you want webpack to recognize the file as HTML and all its references in it, you need the html-loader. The html-loader parses the given file with an HTML parser and picks up references to other files within attributes. By default, that is only <img src="...">. In your case, you need to tell the html-loader to also look for ng-src attributes, like this:

// webpack.config.js

    ...
    loaders: [{
        test: /\.html$/,
        loaders: [
            "html?" + JSON.stringify({
                attrs: ["img:src", "img:ng-src"]
            })
        ]}
    ]

answered Feb 16, 2016 at 12:11

Johannes Ewald

17.8k5 gold badges46 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

coderdark Over a year ago

When I add your code i can now see a folder named images with the images inside...BUT my application does not load and it goes into a crazy endless loop trying to load a resource and that makes my computer scream. :(

Johannes Ewald Over a year ago

When does the endless loop occur? When compiling? Or on runtime? Do you have hot module replacement (HMR) enabled?

coderdark Over a year ago

It happens at runtime. It happens with the attrs or without. Also when using raw-loader or file-loader it runs fine. I do have some dynamic loading images. No HMR enable. I created a second small project and some of the images are below the limit in the url-loader. The images get base64 encoded but not showing.

coderdark Over a year ago

thanks for your help sr. It seems like I got the images now but now I have another problem with loading dynamic views with ng-include. Webpack can be confusing and frustrating at times. :(

Johannes Ewald Over a year ago

Webpack's options may be confusing yes, but I don't think that it's all webpack's fault. Bundling front end assets is a complex issue due to different module styles and frameworks in the wild.

|

Collectives™ on Stack Overflow

Webpack and Angular HTML image loading

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related