Angular 2 img src in a relative path
<p><strong>The johnpapa Angular 2 style guide</strong> suggests a <strong><a href="https://github.com/johnpapa/angular-styleguide/blob/master/a2/README.md#folders-by-feature-structure">folder-by-feature</a></strong> approach.  I get the idea, you can make self contained little angular components that can be reused.</p>

<p>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.</p>

<pre><code>&lt;img class="logo" src="logo.png"/&gt;
</code></pre>

<p>But this tries to then load the image from root <strong><code>localhost:3000/logo.png</code></strong>. <br><br> 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?</p>

<p>Suggestions on this?</p>

<p><strong>Edit for clarification</strong>
I am using the folder structure from the Angular 2 quickstart, meaning my root folder is:</p>

<pre><code>app/
node_modules/
index.html
package.json
tsconfig.json
</code></pre>

<p>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.</p>

<p>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 <em>just like I can with the template or css</em></p>