title: How should I reference assets in angular custom element (Web Components)
body: <p>I have created a web component and I referenced image from my asset folder in there </p>
  
  <p>as below</p>
  
  <pre><code> &lt;img src="./assets/bot.png" alt="{{botTitle}}" /&gt;
  </code></pre>
  
  <p>on local everything is fine, I published my custom element to firebase host and javascript, css and asset folder already exist on my host.</p>
  
  <p>then I tried to use my web component in another html peage as below</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;TMIBot&lt;/title&gt;
      &lt;base href="/"&gt;
  
      &lt;meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no"&gt;
  
      &lt;title&gt;Test Angular Elements&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://myproject.firebaseapp.com/dist/dlx-styles-1.0.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;dlx-chat&gt;&lt;/dlx-chat&gt;
      &lt;script type="text/javascript" src="https://myproject.firebaseapp.com/dist/dlx-chatbot-1.0.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and served this via a local http server (http-server)</p>
  
  <p>The problem is images are loading from <code>./assets/bot.png</code> which doesn't exist in in the hosted website, and they exists on my published website in firebase.</p>
  
  <p>I know that I can refer them by a full url, but also I think there is a obvious solution and I missed.</p>
  
  <p>I appreciate help</p>