Axios return img Src with Vue JS

Question

Hi all i have this issue i had to return of axios, that I am not positioning in the right place i show my basic code:

pictures(city) {
      axios
        .get(
          `https://pixabay.com/api/?key=***********&q=${city}&image_type=photo&pretty=true`
        )
        .then((resp) => {
          if(resp.data.hits.length)
          // console.log(resp.data.hits[0].largeImageURL)
          return resp.data.hits[0].largeImageURL
          else
          // console.log('ELSE')
          return 'https://cdn2.civitatis.com/reino-unido/londres/guia/aeropuerto-gatwick.jpg'
        });
    },

And what i want to do, is call this method in my HTML like that

<img :src="pictures(item.city)" />

And i wait the return that would be a link from the api, but i must be wrong somewhere. Sorry if it's basic, and if i forgot to do something basic.

Thank you very much for the time taken to my question

Does the City you're testing with happen to have a space in it? — vanblart, Jun 09 '21 at 12:47
No there is no space it comes from algolia api and with console.log i get link url but with return i have no return in fact — Alexandre Viretti, Jun 09 '21 at 12:59
Do you see a response when you console log the largeImageURL? If so, when you inspect the page do you see that URL in the `img` tag of the html generated? — vanblart, Jun 09 '21 at 13:43
Yes I've got a link when I console but when I inspect the page html I've nothing or I've a promise when I return axios — Alexandre Viretti, Jun 09 '21 at 14:11
pictures(city) returns undefined, while it should return a string, and it cannot because of this https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call . Making a request and showing a result should be different operations. — Estus Flask, Jun 09 '21 at 15:35

Axios return img Src with Vue JS

0 Answers0