Angular2とwebpackで静止画像を読み込めません。

Question

通常、私はバックエンドの開発者ですが、フロントエンドのものを学び始めました。 私はAngularチュートリアルからサンプルアプリケーションを作って、自分で小さなアプリを作ろうとしています。

私は単純な問題で立ち往生しました。静的なイメージ（例：ロゴ）をロードしようとすると404エラーコードが返されます。私は設定で何かを逃したように見えます、そして、私はそれが何であるか分かりません。ロード・イメージの

---

コード：

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

---

構造：

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" 
    } 
} 

---

設定/

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> 

をwebpack.common.js

---

Answer 1

はimages前/を追加します。あなたのSPAがルートにあるindex.htmlであるので、すべてのパスはルートとの相対パスになります。

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

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

Answer 2

相対パスを使用してください。 main.tsであれば、たとえば：

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

Answer 3

：

ない場合、あなたはあなたのWebPACKに正しくお使いの資産をコピーしているかどうかを確認、また<head>

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

であなたのベースURLを追加あなたの "資産"フォルダに画像を保存してみてください。あなたの角型アプリの "src"フォルダー。 HTML内でassets/myImage.jpgを、CSS内で/src/assets/myImage.jpgを開いてみてください