Angular2 + webpack zeigt keine Bilder an

Question

Ich habe die Angular2 webpack tutorial verfolgt, scheint aber, dass die App kein Bild laden kann. Dies ist die Verzeichnisstruktur meiner App:

... 

/dist/ 
/src/assets/images/ 
/src/assets/css/ 

... 

Und das ist die webpack Konfiguration auf Datei 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': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
    }, 

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

    module: { 
    rules: [ 
     { 
     test: /\.ts$/, 
     loaders: [{ 
      loader: 'awesome-typescript-loader', 
      options: { configFileName: helpers.root('src', 'tsconfig.json') } 
     } , 'angular2-template-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: 'html-loader' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
     loader: 'file-loader?name=assets/[name].[hash].[ext]' 
     }, 
     { 
     test: /\.css$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' }) 
     }, 
     { 
     test: /\.css$/, 
     include: helpers.root('src', 'app'), 
     loader: 'raw-loader' 
     } 
    ] 
    }, 

    plugins: [ 
    // Workaround for angular/angular#11580 
    new webpack.ContextReplacementPlugin(
     // The (\\|\/) piece accounts for path separators in *nix and Windows 
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     helpers.root('./src'), // location of your src 
     {} // a map of your routes 
    ), 

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

    new HtmlWebpackPlugin({ 
     template: 'src/index.html' 
    }) 
    ] 
}; 

Nun, wenn ich versuche, einige Bild hinzuzufügen die Vorlagen:

<img src="/assets/images/hp-logo.png"> 

ich bin immer den folgenden Fehler während der Kompilierung bekommen (wenn npm start ausgeführt wird):

ERROR in ./src/app/templates/dashboard.component.html 
Module not found: Error: Can't resolve './assets/images/hp-logo.png' in '/frontend/src/app/templates' 
@ ./src/app/templates/dashboard.component.html 1:582-620 
@ ./src/app/components/dashboard.component.ts 
@ ./src/app/modules/app.module.ts 
@ ./src/main.ts 
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.ts 

Ich denke, es hat etwas mit dem Datei-loader zu tun, aber nach anderer Konfiguration versuchen konnte ich es nicht zu arbeiten.

Jemand kann mir hier helfen?

Answer 1

Sie sollten den Bildpfad relativ zum Speicherort der Vorlage schreiben. Wenn Ihre Vorlage z.B. bei /src/module1/template.html dann sollte Ihr Bild Standort

<img src="../assets/images/hp-logo.png"> 

Answer 2

Try sein Zugabe:

new CopyWebpackPlugin([{ 
    from: 'src/assets', 
    to: 'assets', 
}, { 
    from: 'src/meta', 
},]) 

den webpack.common.js innerhalb Plugins Array.