How to inject domain from environment variable into vuejs with require

Question

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.

I'm currently working in with @vue/cli and typescript. I have the following component:

example.vue

<template>
  <div id="example">
    <img :src="exampleIcon" alt="Example"/>
  </div>
</template>

<script lang="ts">
  export default {
    data() {
      return {
        exampleIcon: require(`../assets/exampleIcon.png`),
      };
    },
  };
</script>

The above renders fine, it produces an img tag that results in this:

<img src="/img/exampleIcon.8d0b1a90.png" alt="Example">

but let's say my domain is example.com, here's what I would like to have as a result instead:

<img src="https://example.com/img/exampleIcon.8d0b1a90.png" alt="Example">

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:

export default {
    data() {
      return {
        baseUrl: process.env.BASE_URL,
      };
    },
  };

Some related documentation:

After searching a little more, I found the following issue: https://github.com/webpack-contrib/file-loader/issues/290 and the proposed solution seems right. I'll give this a try and will update here. — GabLeRoux, Sep 25 '18 at 05:02
Ok I can confirm that doing something like ```'http://localhost:8081' + require(`../assets/large_image.png`)``` does work, but I just found that smaller images are being converted to base64 encoded inline images so this can cause other problems. — GabLeRoux, Sep 25 '18 at 05:10
The following solution also works and doesn't require an environment variable: `let url = window.location.protocol + "//" + window.location.host;` followed by ```url + require(`../assets/large_image.png`)```. source: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/ — GabLeRoux, Sep 25 '18 at 05:13
Did my answer solve your problem? If it did, please accept it :) — klimat, Oct 01 '18 at 10:29
Thanks for your answer, but I went with [my comment here instead](https://stackoverflow.com/questions/52490871/how-to-inject-domain-from-environment-variable-into-vuejs-with-require?noredirect=1#comment91922613_52490871) and used `window.location.host`. I did not want to hardcode domains, I only wanted the full url as it's a tool anyone could run from anywhere and there is no predefined production url. Not quite sure why, but the node process didn't grab my `process.env.BASE_URL`, I did not dig further but I'm ok using `window.location.host`. — GabLeRoux, Oct 01 '18 at 13:20

score 1 · Answer 1 · answered Sep 25 '18 at 08:38

You're pretty close.

Instead of getting a value of baseUrl from an environmental variable, set the value based on the environment you build the current app for:

data() {
  return {
    baseUrl: process.env.NODE_ENV == 'production'? "https://example.com" : 'http://localhost:8081'
  }

I guess you have different npm scripts for production environment and development environment. In webpack 4 you can use use mode.

How to inject domain from environment variable into vuejs with require

1 Answers1