¿Cómo cargar imagen src url en vuejs de forma asíncrona?

La URL de la imagen se está imprimiendo en la consola pero no se está renderizando en el atributo src. ¿Cómo lograr esto con async y esperar en vuejs?

Donde imgURL contiene nombre de archivo y es colecciones de nombres de archivo.

  methods: { async getLink(url){ let response = await PostsService.downloadURL({ imgURL : url }) console.log(response.data) return response.data } } 

Estoy obteniendo URL del backend con axios.

Eso no es posible de esa manera, el proceso de crear / actualizar el DOM a partir de los valores es un proceso sincrónico. Y debido a eso, Vue.js usaría el valor / objeto devuelto por getLink tal como está, que en su caso sería un objeto Promise.

Para resolver el problema, debe crear un componente propio para esas imágenes. En la callback de ese componente, llamaría a getLink ; en el método getLink , establecería el link datos tan pronto como se reciban los datos, y eso provocaría un cambio de dirección.

 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 } } 

En la plantilla del componente de imagen tendrías algo como esto:

  

Seguro que ahora puedes extender ese componente de imagen para incluir un indicador de carga o algo así.

 Vue.component('my-image-component', { props: { url: {type:String, required: true} }, data : function() { return {link : 'loading'} }, template: '
{{ link }}
', 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" } } })