Ejercicio: Ejercicio 3
Crea una galería de imágenes basándonos en una lista de objetos con la información de cada imagen.
Solución:
<body>
<div x-data="{ images: [
{ src: 'image1.jpg', alt: 'Imagen 1' },
{ src: 'image2.jpg', alt: 'Imagen 2' },
{ src: 'image3.jpg', alt: 'Imagen 3' },
{ src: 'image4.jpg', alt: 'Imagen 4' },
{ src: 'image5.jpg', alt: 'Imagen 5' }
] }">
<div class="gallery">
<template x-for="image in images">
<div class="image">
<img x-bind:src="image.src" x-bind:alt="image.alt">
</div>
</template>
</div>
</div>
</body>