[Vuejs]-VueJs not displaying image that gets it from an axios promise and then puts image url in src

by

2👍

✅

I think you’re still a little confused with promises. your animFind function is not returning anything.

Instead try

<template>
  <section>
    <img :src="url1" alt="./assets/notFound.png" />
    <img :src="url2" alt="./assets/notFound.png" />
  </section>
</template>

<script>
import axios from "axios";

export default {
  props: {
    anime1: String,
    anime2: String,
  },
  data() {
    return {
      url1: '',
      url2: '',
      error: ''
    }
  },
  methods: {
    animeFind(anime, data) {
      axios
        .get(`https://api.jikan.moe/v3/search/anime?q=${anime}`)
        .then(response => {
          const id = response.data["results"][0]["mal_id"];
          axios
            .get(`https://api.jikan.moe/v3/anime/${id}`)
            .then(response => this[data] = response.data["image_url"]);
        })
        .catch(error => {
          this.error = error; // take care of this later
        });
    }
  },
  
  watch: {
    anime1: {
      immediate: true,
      handler(newVal, oldVal) {
        this.animeFind(newVal, 'url1');
      },
    },
    anime2: {
      immediate: true,
      handler(newVal, oldVal) {
        this.animeFind(newVal, 'url2');
      },
    },
  },
};
</script>

Notice the use if arrow functions to stay in the vue scope

👤Sélim Achour

1👍

The getImages() function return before the animeFind() would return. So the getImages() will return undefined.

You can put the axios call into hooks and when you return the response.data object, you can assign it to a property in the data object. You use this property instead the function in the template, so the component will be reactive.
Notice that you should use regular function on the outer function in the axios call and arrow functions on the then() responses for getting a proper this.

I am taking care of only one image example for simplicity, but editing this is not so complicated.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <section>
    <p>Show image here</p>
    <img :src="urlResponse['image_url']" alt="./assets/notFound.png">
  </section>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      urlResponse: {}
    };
  },

  props: {
    anime1: String,
    anime2: String
  },

  created() {
    this.animeFind(this.anime1);
  },

  updated() {
    this.animeFind(this.anime1);
  },

  methods: {
    animeFind: function(anime) {
      axios
        .get(`https://api.jikan.moe/v3/search/anime?q=${anime}`)
        .then(async response => {
          const id = await response.data["results"][0]["mal_id"];
          await axios
            .get(`https://api.jikan.moe/v3/anime/${id}`)
            .then(response => {
              this.urlResponse = Object.assign(
                {},
                this.urlResponse,
                response.data
              );
              return response.data;
            })
            .catch(function(error) {
              return error; // take care of this later
            });
        })
        .catch(function(error) {
          return error; // take care of this later
        });
    }
  }
};
</script>
<style></style>
👤piir

Leave a comment