How to load image src url in vuejs asyncronously?

That's not possible that way, the process of creating/updating the DOM from the values is a synchronous process. And because of that Vue.js would use the value/object returned by the getLink directly as is, which in your case would be a Promise object.

To solve the problem you would need to create an own component for those images. In the created callback of that component, you would call getLink, in the getLink method you then would set the data link as soon as the data is received, and that would trigger a rerender.

created() {  // when the instance ist create call the method  this.getLink();},methods: {  async getLink(){    let response = await PostsService.downloadURL({      imgURL : this.url    })    console.log(response.data)    this.link = response.data  }}

In the template of the image component you would have something like this:

<img :src= "link">

You for sure can now extend that image component to include a loading indicator or something like that.

Vue.component('my-image-component', {  props: {    url: {type:String, required: true}  },  data : function() {    return {link : 'loading'}  },  template: '<div>{{ link }} </div>',  created() {    this.getLink();  },  methods: {    getLink() {      setTimeout(() => {        this.link = 'response url for link: ' + this.url      }, 1000)    }  }})new Vue({  el: '#app',  data: {    "imgURL": {      test1: "1234",      test2: "5678"    }  }})

<div id="app">  <div v-for="(data, key) in imgURL" :key="key">    <my-image-component :url="data"></my-image-component>  </div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js" type="text/javascript" charset="utf-8"></script>