5

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.

coderdark
  • 1,481
  • 14
  • 30

1 Answers1

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"]
            })
        ]}
    ]
Johannes Ewald
  • 17,665
  • 5
  • 44
  • 39
  • 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. :( – coderdark Feb 16 '16 at 16:31
  • When does the endless loop occur? When compiling? Or on runtime? Do you have hot module replacement (HMR) enabled? – Johannes Ewald Feb 17 '16 at 09:25
  • 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 Feb 17 '16 at 17:31
  • 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. :( – coderdark Feb 18 '16 at 15:44
  • 1
    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. – Johannes Ewald Feb 19 '16 at 16:07
  • Is this solution applicable to Angular 2 as well ? I am trying to get the img src working but in vain. I am getting "Module not found: Error: Can't resolve 'html-loader'" in .ts files. – TechCrunch Mar 03 '17 at 03:42
  • @jhnns this doesn't work for ``. How to solve this problem? – xfg Jul 10 '17 at 13:17
  • Looks like your image is dependent on the runtime value hash. In this case, you can't use webpack to bundle your images, because webpack needs to know all the assets at build time. If you do know the images at build time, you can create an object with all the image urls and use that as map: `{ myImage: require("file-loader!./image.png") }`. – Johannes Ewald Jul 12 '17 at 07:34