The problem is that your dev and your gh pages have different root levels, your dev root URL should be something like this: http://localhost:port , while your gh page root is http://myAcc.imtqy.com , why your relative icons do not work,
I assume you have different webpack configurations, change your production configuration to something like this:
output: { path: 'something', filename: 'something.bundle.js', publicPath: '/myRepo/' // this will add /myRepo/ to all your assets }
Here is a brief description of publicPath:
output.publicPath
publicPath indicates the common URL of the output files when linking in the browser. For loaders that insert <script> or <link> tags or <link> objects such as images, publicPath used as href or url() in the file if it differs from the location on the disk (as indicated by path ). This can be useful when you want some or all of the output files in another domain or on a CDN. Webpack Dev Server also uses this to determine the path where a message is expected from the output files. As with path , you can use the [hash] substitution for a better cache profile.
Read more about publicPath here
Update:
output.publicPath only works with assets that have already been declared, since you specified your img source dynamically, but this will not work. You can use the file loader for this, just change your loader to this:
{ test: /\.(jpg|png|gif)$/, loader: 'file?name=/myRepo/[name].[ext]' },
So whenever you need jpg|png|gif for your code, it adds the line /myRepo/ .
Another solution is to create a custom pipe , since you are using angular2 -webpack-starter, your building process will export your environment to varaible ENV so that you can use this for your custom channel, something like this
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; } }
And use it on your component as follows:
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'; }