0

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 ?

1 respuesta 1

0

modifica el file main.js

import Vue from "vue";
import App from "./App.vue";
import vuetify from "vuetify";
Vue.config.productionTip = false;
Vue.use(vuetify);
new Vue({
  vuetify: new vuetify(),
  render: (h) => h(App)
}).$mount("#app");

y tu componente deberia ser construida con vue2

<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">
            <div class="px-5">
              <v-img :src="images(champ.id)"></v-img>
            </div>
          </div>
          <v-divider></v-divider>
          <v-card-actions>
            <v-col align="center">
              <v-card-subtitle>{{ champ.title }}</v-card-subtitle>
            </v-col>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return { champs_data: [{ id: "1", title: "title1", name: "name1" }] };
  },
  props: {
    msg: String,
  },

  methods: {
    images(id) {
      this.champs_image = `http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${id}_0.jpg`;
      return this.champs_image;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

aqui tienes un demo: https://codesandbox.io/s/boring-wildflower-rm7wk?file=/src/components/HelloWorld.vue:0-1392

1
  • A qué te refieres con que el componente sea construida con vue2 ? el 17 dic. 2020 a las 16:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.