como dice la pregunta necesito mostrar todas las imágenes de pantalla de carga de cada campeón. La Página me otorga el siguiente enlace: http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Aatrox_0.jpg para la imagen de un solo campeón, pero como puedo hacer para mostrar todas las imágenes de cada campeón ? Estoy utilizando firebase, tengo que subir todas las imágenes a la storage o puedo hacerlo de otra manera ?
Aquí el fragmento de código donde quiero poner las imágenes:
<template>
<div>
<v-row class="mx-5 my-5">
<v-col v-for="champ in champs_data" :key="champ.id" align="center" :cols="4">
<v-card>
<v-card-title>
<v-col align="center">
{{ champ.name }}
</v-col>
</v-card-title>
<v-divider></v-divider>
<div class="px-5">
<v-img></v-img> <----------------- Aquí quiero mostrar todas las imágenes
</div>
<v-divider></v-divider>
<v-card-actions>
<v-col align="center">
<v-card-subtitle>{{ champ.title.toUpperCase() }}</v-card-subtitle>
</v-col>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</template>
Como pueden ver en la primera columna tengo un v-for donde obtengo la info de cada campeón de un .json incluyendo en nombre de cada campeón. Podré hacer algo con esos nombre para mostrar cada imágen?
Intenté hacer lo siguiente:
<div class="px-5">
<v-img :src="images(champ.id)"></v-img> <----- champ.id me devuelve los nombres de los campeones
</div>
methods: {
images(id) {
this.champs_image = `http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${id}_0.jpg`
return this.champs_image
}
}
Haciendo esto logro mostrar todas las imágenes, pero el problema esta en que la página carga muy muy lento y además me sale el siguiente error en consola:
[Vue warn]: You may have an infinite update loop in a component render function.
¿ Tendrá solución o simplemente lo que hice es un error total ?