How to inject domain from environment variable into vuejs with require - vue.js

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:
vue-loader asset-url
file-loader

Answer 1

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.
Read more about environments.