angular_base url和gh-pages上的相对路径

import {Component} from '@angular/core';

@Component({
  selector: 'header',template: `
      <img class="fb-logo" [src]="fbLogo"/>
      <img class="ang-logo" [src]="angularLogo"/>
  `
})

export class Header{

    angularLogo = '../../assets/img/angular-logo.png';
    fbLogo = '../../assets/img/share/facebook.svg';
}

angularLogo = require('../../assets/img/angular-logo.png');
fbLogo = require('../../assets/img/share/facebook.svg');

问题是你的dev和你的gh页面有不同的根级别,你的dev root url必须是这样的：http：// localhost：port而你的gh-page root是http://myAcc.github.io那是为什么你的相对图标不起作用.

我猜你有不同的webpack配置,将你的生产配置改为这样的：

output: {
  path: 'something',filename: 'something.bundle.js',publicPath: '/myRepo/' // this will add /myRepo/ to all your assets
}

这是关于publicPath的快速解释：

output.publicPath

The publicPath specifies the public URL address of the output files
when referenced in a browser. For loaders that embed <script> or
<link> tags or reference assets like images,publicPath is used as the
href or url() to the file when it’s different than their location on
disk (as specified by path). This can be helpful when you want to host
some or all output files on a different domain or on a CDN. The
Webpack Dev Server also uses this to determine the path where the
output files are expected to be served from. As with path you can use
the [hash] substitution for a better caching profile.

您可以找到有关publicPath here的更多信息

更新：

output.publicPathonly可以处理已经声明的资产,因为您动态指定了img源它将无法工作.您可以使用文件加载器为您完成此操作,只需将您的加载器更改为：

{
  test: /.(jpg|png|gif)$/,loader: 'file?name=/myRepo/[name].[ext]'
},

因此,只要您在代码中需要jpg | png | gif,就会添加字符串/ myRepo /.

另一个解决方案是创建自定义管道,因为您正在使用angular2-webpack-starter,您的构建过程会将您的环境导出到可变的ENV,以便您可以将其用于自定义管道,如下所示：

import { Pipe,PipeTransform } from '@angular/core';

@Pipe({name: 'pathResolver'})
export class PathResolverPipe implements PipeTransform {
  transform(path: string): string {

    return ENV === 'production' ? path.replace(/assets/i,'myRepo/assets') : path;
  }
}

并在您的组件上使用它,如下所示：

import {Component} from '@angular/core';
import { PathResolverPipe } from 'path/to/pipe';

@Component({
  selector: 'header',pipes: [PathResolverPipe],template: `
      <img class="fb-logo" [src]="fbLogo | pathResolver"/>
      <img class="ang-logo" [src]="angularLogo | pathResolver"/>
  `
})

export class Header{

    angularLogo = '../../assets/img/angular-logo.png';
    fbLogo = '../../assets/img/share/facebook.svg';
}