13

The image url is printing in console but not rendering to src attribute. How to achieve this with async and await in vuejs?

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

Where imgURL contains file name and it is collections of file names.

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

I am getting URL from the backend with axios.

Improve this question

2 Answers 2

Reset to default
15

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

It has to be called after getting data from the server. So what is the use of calling getLink method in created()?
@code.mevn If you place the given code in an Image Component and if you use that component in the for loop, then created is called when the component is created in the loop. At that point, the getLink is called, so at the same time as in your code. Then when the response from the server is received, the property link is set and at that time the binding will update the src.
How should we can pass data value from loop with above procedure?
@code.mevn you really should take a closer look at the documentation or a turorial that exaplains how to write and use components. I updated the question to contain a minimal example.
If I could hug you, I would. Works like a charm! I am using aws amplify with vue to display images from s3 bucket and I was about to lose my mind.
|
0

today is easy just use let images = ref([]) reactive will load for you

Improve this answer

1 Comment

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.