无法将图像动态渲染到carousel Vuejs

npm install vue

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

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, url: 'image1.jpg' },
        { id: 2, url: 'image2.jpg' },
        { id: 3, url: 'image3.jpg' }
      ]
    };
  }
};
</script>

<style>
.carousel {
  /* 样式设置 */
}
</style>

<template>
  <div>
    <h1>My Carousel</h1>
    <carousel></carousel>
  </div>
</template>

<script>
import Carousel from './Carousel.vue';

export default {
  components: {
    Carousel
  }
};
</script>