Can't load static image with Angular2 and webpack

Question

Usually I'm backend developer but started learn frontend stuff. I made example app from Angular tutorial and trying to build my own small app now.

I stuck with simple problem - when I'm trying to load static image (ex. logo) it returns me 404 error code. Looks like I missed something in configuration and I have no idea what it can be.

Code for load image:

<img src="images/logo.png" alt="Logo" width="48" height="48"/>

Structure:

web
- app
-- assets
-- images
-- js
-- model
-- stylesheets
-- *.ts
-- *.html
-- *.css
-- main.ts
-- polyfills.ts
-- rxjs-extensions.ts
-- vendor.ts
- config
- dist
- index.html
- packages.json
- tsconfig.json
- typings.json
- webpack.config.js

package.json

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --display-error-details --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "postinstall": "typings install"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "2.0.1",
    "@angular/compiler": "2.0.1",
    "@angular/core": "2.0.1",
    "@angular/forms": "2.0.1",
    "@angular/http": "2.0.1",
    "@angular/platform-browser": "2.0.1",
    "@angular/platform-browser-dynamic": "2.0.1",
    "@angular/router": "3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23",
    "assets-webpack-plugin": "^3.4.0"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0",
    "copy-webpack-plugin": "^3.0.1"
  }
}

config/webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './app/polyfills.ts',
        'vendor': './app/vendor.ts',
        'app': './app/main.ts'
    },

    resolve: {
        extensions: ['', '.js', '.ts']
    },

    module: {
        loaders: [
            {
                test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
                loader: 'file'
            },
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('app'),
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
            },
            {
                test: /\.css$/,
                include: helpers.root('app'),
                loader: 'raw'
            }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'index.html',
            inject: 'body'
        }),
    ]
};

webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const webpack = require('webpack');

const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');

module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',

    debug: true,

    output: {
        path: helpers.root('app'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

index.html

<html>
<head>
    <base href="/">
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<catalog-root>Loading...</catalog-root>

</body>
</html>

Edmar Miyake · Accepted Answer · 2016-10-12 23:12:35Z

3

Add a / before images. All the paths will be relative to root, since your SPA is index.html located in root, I assume.

If not, add your base url in <head>

<base href="<%= webpackConfig.metadata.baseUrl %>">

Also, check if your are copying your assets correctly in your webpack:

const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins[
  ...,
  new CopyWebpackPlugin([{
    from: 'app/images',
    to: './images'
  }]);
];

edited Oct 12, 2016 at 23:12

answered Oct 12, 2016 at 22:51

Edmar Miyake

12.4k3 gold badges40 silver badges39 bronze badges

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

4 Comments

Alex Over a year ago

"/" - the same 404. There was <base href> in index.html. Should I added it in each page? The same result for all <base href> options provided by you.

Edmar Miyake Over a year ago

No, just need to add in your index.html. Did you copy your assets in webpack?

Alex Over a year ago

Thanks. It is working now. I added CopyWebpackPlugin and build.

Lin Du Over a year ago

The problem is, in real world, parts of images are used by Base64 url. url-loader can convert the image to base64 url. So, copy the whole images directory doesn't make sense. What about the image size is just 1kb? Do you really want to send a request to server for this?

snorkpete · Accepted Answer · 2016-10-12 22:40:54Z

1

Try using a relative path. So eg if in main.ts:

<img src="./images/logo.png" alt="Logo" width="48" height="48"/>

answered Oct 12, 2016 at 22:40

snorkpete

14.6k3 gold badges43 silver badges57 bronze badges

4 Comments

Alex Over a year ago

the same result: 404

snorkpete Over a year ago

what is appearing in your /dist folder if you do a build? is the image appearing there? Only stuff that would appear in the /dist folder would be available via the web server..

Alex Over a year ago

no, there are no any images in dist folder after build. There are app....js, app...js.map, index.html, polyfills...js, polyfills...js.map, vendor...js, vendor....js.map. But styles and css are loaded fine.

snorkpete Over a year ago

I am the furthest thing from a webpack expert - but i remember recently having some grief related to images not loading on my most current project. I'm checking through my webpack config and not seeing anything that can assist you though...

Ashkan R. Nejad · Accepted Answer · 2017-09-01 06:39:24Z

0

Try keeping you images in "assets" folder in the "src" folser of your angular app. then try to open in using assets/myImage.jpg in the HTML and /src/assets/myImage.jpg in the CSS

answered Sep 1, 2017 at 6:39

Ashkan R. Nejad

17413 bronze badges

Collectives™ on Stack Overflow

Can't load static image with Angular2 and webpack

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related