如何設置Angular 2和Webpack項目以從上下文路徑檢索圖像？

Question

在此處使用Angular 2 Webpack入門： https : //github.com/AngularClass/angular2-webpack-starter

我想訪問http://localhost:3000/contextPath的應用程序，而不是http://localhost:3000

我在webpack.dev.js的輸出下添加了publicPath設置：

  output: {
    publicPath: '/contextPath',
    path: helpers.root('dist'),
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js',
    library: 'ac_[name]',
    libraryTarget: 'var',
  },

並在webpack.common.js中設置baseUrl：

const METADATA = {
  title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
  baseUrl: '/contextPath',
  isDevServer: helpers.isWebpackDevServer()
};

運行webpack-dev-server我可以通過http://localhost:3000/contextPath#/home訪問該應用程序，可以使用上下文路徑正確提供.js文件，例如http://localhost:3000/contextPath/polyfills.bundle.js ，但是角度屏蔽圖像已損壞，頁面正在嘗試從http://localhost:3000/assets/img/angularclass-avatar.png檢索它。

如何使應用程序為圖像使用正確的URL（包括上下文路徑），即http://localhost:3000/contextPath/assets/img/angularclass-avatar.png ？

應用在上下文路徑中運行，且圖像鏈接斷開：

Answer 1

我相信您想設置publicPath屬性。 嘗試設置：

output.publicPath: '/contextPath' 。

Answer 2

雙方baseUrl和publicPath中包括結束斜線需要我的WebPack配置文件。 將它們設置為'/contextPath/'解決此問題。