如何设置 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，但是angular 屏蔽图像已损坏，页面正在尝试从 http://localhost:3000/assets/img/angularclass-avatar.png 检索它。

我应该如何让应用程序为图像（包括上下文路径）使用正确的 url，即 http://localhost:3000/contextPath/assets/img/angularclass-avatar.png？

应用程序运行在图像损坏的上下文路径 link:

Answer 1

我相信你想要设置 publicPath 属性。尝试设置：

output.publicPath: '/contextPath'.

Answer 2

我的 webpack 配置文件中的 baseUrl 和 publicPath 都需要在末尾包含一个斜杠。将它们设置为 '/contextPath/' 解决了问题。

如何设置 Angular 2 & webpack 项目以从上下文路径检索图像？

How do I set an Angular 2 & webpack project to retrieve images from a context path?

webpack

webpack-dev-server

angular