Statisches Bild kann nicht mit Angular2 und Webpack geladen werden

Question

Normalerweise bin ich Backend-Entwickler, habe aber angefangen, Frontend-Sachen zu lernen. Ich machte eine Beispiel-App von Angular Tutorial und versuche jetzt, meine eigene kleine App zu bauen.

Ich steckte mit einem einfachen Problem - wenn ich versuche, statische Bild (z. B. Logo) zu laden, gibt es mir 404 Fehlercode. Sieht aus, als hätte ich etwas in der Konfiguration verpasst und ich habe keine Ahnung, was es sein kann.

---

-Code für Last Bild:

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

---

Struktur:

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> 

---

Answer 1

ein / vor images hinzufügen. Alle Pfade werden relativ zu root sein, da Ihr SPA index.html in root liegt, nehme ich an.

Wenn nicht, fügen Sie Ihre Basis-URL in <head>

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

Überprüfen Sie auch, wenn Sie in Ihrem webpack Ihr Vermögen richtig kopieren:

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

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

Answer 2

Versuchen Sie es mit einem relativen Pfad. So zum Beispiel, wenn in main.ts:

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

Answer 3

Versuchen Sie, Ihre Bilder im Ordner "assets" zu speichern "src" folser von deiner eckigen App. dann versuchen, in assets/myImage.jpg im HTML und /src/assets/myImage.jpg in der CSS