<template>
    <v-container>
      <v-row>
        <v-col
          v-for="image in images"
          :key="image"
          cols="12"
          sm="6"
          md="4"
        >
          <v-card>
            <v-img
              :src="`http://localhost:3000/images/${image}`"
              :alt="image"
              class="image-thumbnail"
            />
            <v-card-title>{{ image }}</v-card-title>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  
  // Déclare une variable réactive pour stocker les images
  const images = ref([]);
  
  // Fonction pour récupérer les images depuis l'API
  const fetchImages = async () => {
    try {
      const response = await fetch('http://localhost:3000/images-list');
      const data = await response.json();
      images.value = data; // Met à jour les images
    } catch (error) {
      console.error('Erreur lors de la récupération des images :', error);
    }
  };
  
  // Appelle la fonction fetchImages lorsque le composant est monté
  onMounted(() => {
    fetchImages();
  });
  </script>
  
  <style scoped>
  .image-thumbnail {
    max-width: 100%;
    height: auto;
  }
  </style>
  