BaseURL in HTML is weak for making a module, how can I fix it?
<p>On the server-side, when file <code>A</code> imports file <code>B</code> as a moudule, <code>A</code> uses a relative path of <code>B</code> whose baseURL is <code>A</code>'s. But for a brower-side module, suppose I write an UI component named <code>module-A</code>. Its file structure looks like this:</p>

<pre><code>.
|-- main.js
`-- pic
    `-- c.jpg
</code></pre>

<p>If I create a element with <code>&lt;img src="./pic/c.jpg"&gt;</code>, it refers to the right picture.</p>

<p>Then I make it into a package, which looks like this if I use Bower to install:</p>

<pre><code>.
|-- components
|   `-- module-A
|       |-- main.js
|       `-- pic
|           `-- c.jpg
`-- index.html
</code></pre>

<p>Or even like this:</p>

<pre><code>.
|-- components
|   `-- module-B
|       `-- components
|           `-- module-A
|               |-- main.js
|               `-- pic
|                   `-- c.jpg
`-- index.html
</code></pre>

<p>But at this time if I create one more menu at <code>index.html</code>, and there will be a tag <code>&lt;img sc="./pic/a.jpg"&gt;</code> create by JS code in <code>module-A</code>. This time it's wrong!</p>

<p>If I want it work, I have to use an iframe to wrapper <code>module A</code> then things could be fine, maybe.</p>

<p>For a server-side program, everything works OK, because there no things like HTML to make all the code in one page (I mean programs which have no UI.).</p>

<p>How can I fix this?</p>

<hr>

<p>Update:</p>

<p>Yes I use Bower, and a CommonJS loader SeaJS which it more popular in China rather than RequireJS. I think it's a common problem whether we use package manager or manager files by hand.</p>
