title: How to inject domain from environment variable into vuejs with require
body: <p>I have a special use case where I need the full url to an image to render on the html side. Ex; Facebook Open Graph requires the full image url to work properly, relative image or absolute path won't work.</p>
  
  <p>I'm currently working in with @vue/cli and typescript. I have the following component:</p>
  
  <p><code>example.vue</code></p>
  
  <pre class="lang-vue prettyprint-override"><code>&lt;template&gt;
    &lt;div id="example"&gt;
      &lt;img :src="exampleIcon" alt="Example"/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
    export default {
      data() {
        return {
          exampleIcon: require(`../assets/exampleIcon.png`),
        };
      },
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>The above renders fine, it produces an img tag that results in this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="/img/exampleIcon.8d0b1a90.png" alt="Example"&gt;
  </code></pre>
  
  <p>but let's say my domain is <code>example.com</code>, here's what I would like to have as a result instead:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="https://example.com/img/exampleIcon.8d0b1a90.png" alt="Example"&gt;
  </code></pre>
  
  <p>I don't want to hardcode anything in the template. I would like to use an environment variable so I can inject the domain when building the vue bundle:</p>
  
  <pre class="lang-typescript prettyprint-override"><code>export default {
      data() {
        return {
          baseUrl: process.env.BASE_URL,
        };
      },
    };
  </code></pre>
  
  <p>Some related documentation:</p>
  
  <ul>
  <li><a href="https://vue-loader.vuejs.org/guide/asset-url.html" rel="nofollow noreferrer">vue-loader asset-url</a></li>
  <li><a href="https://github.com/webpack-contrib/file-loader/" rel="nofollow noreferrer">file-loader</a></li>
  </ul>