[Vuejs]-How to load a placeholder image then toggle to the real one once HTTP calls are done?

by

1👍

✅

Assume we have a big local image tasty.jpg (huge 4k pizza) and a small one with ducks, here is how to make a simple swap between both while using the fetch() hook.

<template>
  <div>
    <img
      :src="require(`~/assets/img/${currentImage}`)"
      width="800"
      height="800"
    />
  </div>
</template>

<script>
export default {
  async fetch() {
    await this.$axios.$get('https://jsonplaceholder.typicode.com/photos')
    console.log('5000 photos loaded!')
  },
  fetchOnServer: false, // the `fetch` hook will be called only client-side
  computed: {
    currentImage() {
      if (process.server) return 'duck.jpg'
      return this.$fetchState.pending ? 'duck.jpg' : 'tasty.jpg'
    },
  },
}
</script>

0👍

you can use this

<style>
   .wrapper {
     width: 30rem;
     height: 30rem;
     background-color: orangered;
   }
</style>
<div class="wrapper">
   <img src="filename.gif" />
</div>

Leave a comment