Recently diving into Nuxt (and also Vuejs) in SPA mode, I've run into an issue with image loading. The image doesn't load until I type something in the search input field. Below are the relevant snippets of my code:
<template>
<input
class="search"
type="text"
placeholder="search name"
v-model="searchTerm"
@keyup.enter="filterPokemonList">
<button @click="clearSearchTerm">clear</button>
<div class="container">
<div class="card" v-for="(pokemon, index) in pokemonList" :key="index" >{{pokemon.name}}
<!-- Here begins my problem of image loading -->
<div v-if="pokemon&&pokemon.sprites">
<img :src="pokemon.sprites.front_default" alt="sprite" width="96px" height="96px">
</div>
<div v-if="!pokemon.sprites">
<img src="~/assets/images/loading.png" alt="loading" width="96px" height="60px">
</div>
<!-- End -->
<nuxt-link :to="'/'+pokemon.name">
<b-button class="card-btn" size="sm" variant="outline-dark">detail</b-button>
</nuxt-link>
<b-button class="card-btn" size="sm" variant="outline-dark" @click="addToEquipe(pokemon)">add</b-button>
</div>
</div>
</template>
In my page script:
<script>
import axios from 'axios'
const PATH_BASE = 'https://pokeapi.co/api/v2/'
const POKEMON = 'pokemon'
const LIMIT = 'limit='
const getPokemonData$ = url => {
return axios.get(url)
}
export const getPokemon$ = (name) =>
axios.get(`${PATH_BASE+POKEMON}/${name}`).then(res => res.data)
export const getPokemons$ = (listNumber) =>
axios.get(`${PATH_BASE+POKEMON}?${LIMIT+listNumber}`).then(
res => {
let pkList = res.data.results
pkList.map((pk) =>
getPokemonData$(pk.url).then(res =>
pk.sprites = res.data.sprites
)
)
return pkList
}
)
export default {
data() {
return {
entirePokemonsCache: [],
pokemonList: [],
searchTerm: "",
}
},
async asyncData (context) {
const result = await getPokemons$(100)
return { pokemonList: result }
},
</script>
It's clear that when fetching data via HTTP GET, I then perform another related HTTP GET to populate additional properties. How can I ensure images load initially without needing user interaction?