53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<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>
|
|
|