Метод не выполняется правильно при начальной загрузке

Question

У меня есть метод для создания URL-адреса для изображения логотипа клуба, и если этого изображения не существует, он создает URL-адрес для изображения логотипа лиги (это еще не идеальный метод, его необходимо реорганизовать, нопока работает):

getLogoUrl: function(club, league) {
  let imageExists = require('image-exists');

  // First check if club logo exists
  let src = "/images/logos/" + club + ".png";
  console.log("FIRST "+src);
  imageExists(src, function(exists) {
    // Then get league logo
    if (!exists) {
      src = "/images/leagues/" + league + ".png";
      console.log("SECOND "+src);
    }
  });
  console.log("THIRD "+src);
  return src;
}

Когда страница загружается первой (она загружает данные с помощью axios из API в mounted), она показывает разбитое изображение.Это потому, что src заполнено изображением названия клуба, которого не существует.Когда я затем нажимаю на ссылку на странице, а затем возвращаюсь на эту страницу, нажимая на ссылку, она правильно показывает изображение лиги.

Это вывод консоли, когда загружается начальная страница (она загружается).конкретное изображение, которое не существует):

FIRST /images/logos/maidenhead-united.png
THIRD /images/logos/maidenhead-united.png
SECOND /images/leagues/the-conference.png

И когда страница загружается при нажатии на ссылку (показано правильное изображение):

FIRST /images/logos/maidenhead-united.png
SECOND /images/leagues/the-conference.png
THIRD /images/leagues/the-conference.png

Так почему это изображение по умолчаниюне загружается при начальной загрузке страницы, но загружается при нажатии на ссылку?Может быть, данные не закончили загрузку, но метод уже выполнен?Это весь код этого компонента:

<template>
  <div class="visits row">
    <div class="col-sm-3 visit" v-for="visit in visits" :key="visit.nr">
      <div class="card">
        <div class="card-header">{{ visit.nr }}</div>
        <div class="card-body">
          <router-link :to="{ name : 'VisitDetails', params: {id: visit.id}}">
            <h5 class="card-title">{{ visit.home }}</h5>
          </router-link>
          <div class="logo">
            <img :src="getLogoUrl(visit.home, visit.league)" class="card-img-center img-responsive center-block"> 
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'home',
  data () {
    return {
      feedback: null,
      visits: [],
      errors: []
    }
  },
  methods: {
    getLogoUrl: function(club, league) {
      let imageExists = require('image-exists');

      // First check if club logo exists
      let src = "/images/logos/" + club + ".png";
      console.log("FIRST "+src);
      imageExists(src, function(exists) {
        // Then get league logo
        if (!exists) {
          src = "/images/leagues/" + league + ".png";
          console.log("SECOND "+src);
        }
      });
      console.log("THIRD "+src);
      return src;
    }
  },
  mounted() {
    axios
      .get(this.$baseURL + "/footmarks")
      .then(response => {
        console.log(response.data)
        this.visits = response.data
      })
      .catch(e => {
        console.log(this.errors)
      })
  }
}
</script>

<style scoped>

</style>

Answer 1

Может показаться, что imageExists использует асинхронный код и возвращает значение в обратном вызове после асинхронной проверки, существует ли изображение в первый раз, происходит после ТРЕТЬЕ в вашем коде, но во второй раз, когда оно загружается, оно ужеимеет значение, и, следовательно, SECOND вызывается немедленно и происходит до THIRD.

Одна вещь, которую вы можете сделать, это установить значение по умолчанию в обратном вызове:

  let src = '/images/some-loading-image.png';
  console.log("FIRST "+src);
  imageExists(src, function(exists) {
    // Then get league logo
    if (!exists) {
      src = "/images/leagues/" + league + ".png";
      console.log("SECOND "+src);
    } else {
        src = "/images/logos/" + club + ".png";
    }
  });