如何在VueJS中创建我的图像网格堆栈？

<template>
  <div class="image-grid-stack">
    <div v-for="image in images" :key="image.id" class="grid-item">
      <img :src="image.url" alt="Image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [] // 存储图像数据的数组
    };
  },
  created() {
    // 从后端获取图像数据并存储在images数组中
    // 可以使用Vue的异步请求库（如axios）发送HTTP请求
    // 示例代码：
    // axios.get('/api/images')
    //   .then(response => {
    //     this.images = response.data;
    //   })
    //   .catch(error => {
    //     console.error(error);
    //   });
  }
};
</script>

<style>
.image-grid-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>