Solución:
estoy usando paquete web y han podido superar este problema al requireing la imagen en el componente como una variable y usar esto en mi plantilla.
Esto se debe a que durante la fase de agrupación, el paquete web cargará el recurso y almacenará la URL correcta, y la llamada a require en tiempo de ejecución obtendrá esta URL correcta para pasar a la plantilla.
Ejemplo
Usando la siguiente estructura de directorio
app/
header/
header.component.ts
header.component.html
assets/
logo.png
...
header.component.ts
...
@Component({
selector: 'header',
templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
private LOGO = require("./assets/logo.png");
constructor() {};
}
header.component.html
<div>
<img [src]="LOGO" />
</div>
Es cierto que esto une el componente y la plantilla, pero el requisito debe estar en el componente para que el paquete web pueda analizarlo y cargarlo al empaquetarlo.
Con este enfoque, empaqueté mi módulo usando npm y lo instalé y usé en otro proyecto, que también usa webpack.
Todavía tengo que probar con SystemJS.
Resolvería este problema dividiendo la ruta src en 2 partes, así:
<img class="logo" [src]="(imgPath + imgFileName)" />
luego, dentro de la definición del componente, establece:
@Input() imgPath:string = "app/header/";
imgFileName:string = "logo.png";
Al usar el decorador @Input (), la variable imgPath se puede ver externamente, de modo que, en caso de que mueva el componente a otro lugar, pueda establecer una ruta diferente, haciendo que el componente sea reutilizable.
La solución de @ David está un poco desactualizada dado que ahora angular2 se puede actualizar, funciona para anular 2/3. Para angular 4 y superior arrojaría un error no encontrado, así es como lo modifiqué,
header.component.ts
...
declare var require: any;
@Component({
selector: 'header',
templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
private LOGO = require("./assets/logo.png");
constructor() {};
}
header.component.html
<div>
<img [src]="LOGO" />
</div>