javascript - Angular 2 img src in a relative path

Question

The johnpapa Angular 2 style guide suggests a folder-by-feature approach. I get the idea, you can make self contained little angular components that can be reused.

So, I made a component I wanted to reuse in another project and put it in it's own folder. I also added an image I wanted this component to display to the same folder, so it's all self contained.

<img class="logo" src="logo.png"/>

But this tries to then load the image from root localhost:3000/logo.png.

I suppose this means I have to actually use the exact path to the image, but doesn't this undermine the whole idea of components that can be reused in other project by other people?

Suggestions on this?

Edit for clarification I am using the folder structure from the Angular 2 quickstart, meaning my root folder is:

app/
node_modules/
index.html
package.json
tsconfig.json

So, even if I use the path header/logo.png, it does not work. I have to do app/header/logo.png. This is effectively an absolute path, and in fact works equally as well if I add a leading slash: "/app/header/logo.png". Anything less than the full path breaks the link. Meaning if someone wanted to reuse this they would have to have the exact same folder structure.

I guess this is just how it works, I'm only just learning Angular 2, but in my mind I should be able to load assets from within a components folder just like I can with the template or css

Answer 1

I am using webpack and have been able to overcome this issue by requireing the image in the component as a variable and using this in my template.

This is because during the bundling phase webpack will load the resource and store the correct URL and calling require at runtime will get this correct URL to pass to the template.

---

Example

Using the following directory structure

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>

---

Admittedly this binds the component and template but the require needs to be in the component so that webpack is able to analyse and load it when bundling.

---

With this approach I have packaged my module using npm and installed and used it in another project - which also uses webpack.

I am yet to test with SystemJS.