Bdtjtk

I have a method to build the URL for an club logo image and if that image doesn't exist, it builds an URL for the league logo image (it is not the perfect method yet, it needs to be refactored, but it works for now):

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;

}

When the page is loaded first (it loads the data with axios from an API in mounted), it shows a broken image. This is because src is filled with the club name image, which doesn't exist. When I then click on a link on the page and then return to this page with a click on a link, it correctly shows the league image.

This is the console output when the initial page is loaded (it loads the specific image which doesn't exist):

FIRST /images/logos/maidenhead-united.png

THIRD /images/logos/maidenhead-united.png

SECOND /images/leagues/the-conference.png

And when the page is loaded from clicking a link (correct image shown):

FIRST /images/logos/maidenhead-united.png

SECOND /images/leagues/the-conference.png

THIRD /images/leagues/the-conference.png

So why is the default image not loaded on initial page load, but it is loaded when clicking a link? Could it be the data has not finished loading, but the method is already executed? This is all code from this component:

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

It would appear that imageExists is using async code and returns the value in the callback after it's done asynchronously checking if the image exists the first time through, occurring after the THIRD in your code, but the second time it's loaded, it already has the value, and thus SECOND is called immediately and occurs before THIRD.

One thing you could do is set the default value within the callback:

  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";

    }

  });