how to have external link in require() in <img> tag src

Question

I have the exact same problem as this question: Linking to images referenced in vuex store in Vue.js

However, unlike the question, I have external link for src of tag such as 'https://....'.

Is there any way I can put the link in require()? I know it has only the path but I need something like require() that runs in compile time.

Thanks for your help!

Answer 1

i had a similar problem, i solved it as follows, i'm not sure of how this affects speed and prerendering and dist, but it worked for me, the img from an external URL is shown in dev mode. hope this helps, i know it's not what you're looking for in sense of require('URL'), but for me it's a workaround i can live with

<template>
  <div>
    <img :src="imgURL" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgURL: ''
    }
  },
  mounted() {
    // on mounted, create the string of your URL and asign it to a variable in data
    this.imgURL = baseURL+dynamicURL
  }
}
</script>