web-dev-qa-db-fra.com

Comment charger l'URL de l'image src dans vuejs de manière asynchrone?

L'URL de l'image s'imprime dans la console mais ne s'affiche pas dans l'attribut src. Comment y parvenir avec async et attendre in vuejs?

<div v-for="(data, key) in imgURL" :key="key">
   <img :src= "getLink(data)" />
</div>

Où imgURL contient le nom de fichier et il s'agit de collections de noms de fichiers.

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

Je reçois l'URL du backend avec axios.

javascripthtmlwebpackvue.jsasync-await
7
code.mevn

Ce n'est pas possible de cette façon, le processus de création/mise à jour du DOM à partir des valeurs est un processus synchrone. Et à cause de cela, Vue.js utiliserait la valeur/l'objet retourné par le getLink directement tel quel, ce qui dans votre cas serait un objet Promise.

Pour résoudre le problème, vous devez créer un propre composant pour ces images. Dans le rappel créé de ce composant, vous appelleriez getLink, dans la méthode getLink, vous définiriez alors les données link dès que les données sont reçues, et ce serait déclencher un rendu.

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

Dans le modèle du composant image, vous auriez quelque chose comme ceci:

<img :src= "link">

Vous pouvez certainement étendre ce composant d'image pour inclure un indicateur de chargement ou quelque chose comme ça.

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>
7
t.niese