How to dynamically display images from an array in vuetify?
Folks who know of Vue / Vuetify, I'm having a hard time displaying images in a tag dynamically.
The situation is as follows. I have an array declared in the "data" that contains multiple objects, and each of those objects has an address for an image. Below is this array:
todasAsCartas:[
{ 'id': 1, 'nome': 'Dois de Ouros', 'valor': 2, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 2, 'nome': 'Três de Ouros', 'valor': 3, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 3, 'nome': 'Quatro de Ouros', 'valor': 4, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 4, 'nome': 'Cinco de Ouros', 'valor': 5, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 5, 'nome': 'Seis de Ouros', 'valor': 6, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 6, 'nome': 'Sete de Ouros', 'valor': 7, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 7, 'nome': 'Oito de Ouros', 'valor': 8, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 8, 'nome': 'Nove de Ouros', 'valor': 9, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 9, 'nome': 'Dez de Ouros', 'valor': 10, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 10, 'nome': 'Dama de Ouros', 'valor': 11, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 11, 'nome': 'Valete de Ouros', 'valor': 12, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 12, 'nome': 'Reis de Ouros', 'valor': 13, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 13, 'nome': 'Ás de Ouros', 'valor': 14, 'naipe': 'Ouros', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 14, 'nome': 'Dois de Espadas', 'valor': 2, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 15, 'nome': 'Três de Espadas', 'valor': 3, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 16, 'nome': 'Quatro de Espadas', 'valor': 4, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 17, 'nome': 'Cinco de Espadas', 'valor': 5, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 18, 'nome': 'Seis de Espadas', 'valor': 6, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 19, 'nome': 'Sete de Espadas', 'valor': 7, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 20, 'nome': 'Oito de Espadas', 'valor': 8, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 21, 'nome': 'Nove de Espadas', 'valor': 9, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 22, 'nome': 'Dez de Espadas', 'valor': 10, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 23, 'nome': 'Dama de Espadas', 'valor': 11, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 24, 'nome': 'Valete de Espadas', 'valor': 12, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 25, 'nome': 'Reis de Espadas', 'valor': 13, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 26, 'nome': 'Ás de Espadas', 'valor': 14, 'naipe': 'Espadas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 27, 'nome': 'Dois de Copas', 'valor': 2, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 28, 'nome': 'Três de Copas', 'valor': 3, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 29, 'nome': 'Quatro de Copas', 'valor': 4, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 30, 'nome': 'Cinco de Copas', 'valor': 5, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 31, 'nome': 'Seis de Copas', 'valor': 6, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 32, 'nome': 'Sete de Copas', 'valor': 7, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 33, 'nome': 'Oito de Copas', 'valor': 8, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 34, 'nome': 'Nove de Copas', 'valor': 9, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 35, 'nome': 'Dez de Copas', 'valor': 10, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 36, 'nome': 'Dama de Copas', 'valor': 11, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 37, 'nome': 'Valete de Copas', 'valor': 12, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 38, 'nome': 'Reis de Copas', 'valor': 13, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 39, 'nome': 'Ás de Copas', 'valor': 14, 'naipe': 'Copas', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 40, 'nome': 'Dois de Paus', 'valor': 2, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 41, 'nome': 'Três de Paus', 'valor': 3, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 42, 'nome': 'Quatro de Paus', 'valor': 4, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 43, 'nome': 'Cinco de Paus', 'valor': 5, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 44, 'nome': 'Seis de Paus', 'valor': 6, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 45, 'nome': 'Sete de Paus', 'valor': 7, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 46, 'nome': 'Oito de Paus', 'valor': 8, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 47, 'nome': 'Nove de Paus', 'valor': 9, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 48, 'nome': 'Dez de Paus', 'valor': 10, 'naipe': 'Paus,', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 49, 'nome': 'Dama de Paus', 'valor': 11, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 50, 'nome': 'Valete de Paus', 'valor': 12, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 51, 'nome': 'Reis de Paus', 'valor': 13, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} },
{ 'id': 52, 'nome': 'Ás de Paus', 'valor': 14, 'naipe': 'Paus', 'images': { 'img': require('@/assets/cartas/doisdeouros.png')} }
],
When I squeegee the application, it does not show the images of the letter. In the template, the code to show this array is this:
<h3 class="ma-4">Baralho</h3>
<v-card class="ma-4 pa-2" v-for="carta in todasAsCartas" :key="carta.images">
<v-card width="50px">
<v-img :src="carta.images.img" aspect-ratio="0.8" max-height="60px" max-widht="30px"></v-img>
</v-card>
</v-card>
0
Author: Eduardo Cardoso, 2019-04-30