web-dev-qa-db-ja.com

vuejsに画像のsrc urlを非同期で読み込む方法は？

画像のURLはコンソールに出力されますが、src属性にレンダリングされません。非同期でこれを達成し、vuejsで待つ方法は？

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

ここで、imgURLはファイル名を含み、ファイル名のコレクションです。

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

AxiosでバックエンドからURLを取得しています。

javascripthtmlwebpackvue.jsasync-await
7
code.mevn

これは不可能です。値からDOMを作成/更新するプロセスは同期プロセスです。そのため、Vue.jsはgetLinkから返された値/オブジェクトをそのまま使用します。この場合、Promiseオブジェクトになります。

問題を解決するには、それらの画像用に独自のコンポーネントを作成する必要があります。そのコンポーネントの作成されたコールバックでgetLinkを呼び出し、getLinkメソッドでデータを受信するとすぐにデータlinkを設定します。再レンダリングをトリガーします。

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

画像コンポーネントのテンプレートでは、次のようになります。

<img :src= "link">

これで、画像コンポーネントを拡張して、読み込みインジケータなどを含めることができます。

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