vue2~vue3 element-ui Carousel 跑马灯 的使用 及 踩坑记录

## Carousel 跑马灯

首先，打开其官网-跑马灯案例

跑马灯代码:

  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3 text="2xl" justify="center">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>

• tips: vue3不再使用require函数导入，而是使用支持es6的import函数去导入

自己的代码是这样的:

<scripe setup>
	import image1 from '@/assets/images/mrhb.jpg'
	import image2 from '@/assets/images/mrlm.jpg'
	import image3 from '@/assets/images/mrxtt.jpg'
	import image4 from '@/assets/images/zly.jpg'
	const bgList = ref([
	    {
	        imageUrl:image1
	    },
	    {
	        imageUrl:image2
	    },
	    {
	        imageUrl:image3
	    },
	    {
	        imageUrl:image4
	    }
	])
</scripe>

<template>
<el-carousel
  class="qunji-carousel"
  ref="carouselRef"
  @change="handelSlideChange"
  :interval="interval"
  :arrow="arrow"
  :direction="direction"
  :loop="loop"
  :initial-index="initialIndex"
  :autoplay="autoplay"
  :type="type"
  :trigger="trigger"
  :height="height"
  :indicator-position="indicatorPosition">
  <el-carousel-item
    class="carousel_Item"
    ref="carouselItemRef"
    v-for="(item,i) in bgList"
    :key="i || item.id">
    <!-- <h3 text="2xl" justify="center">{{ item.url }}</h3> -->
    <!-- 图片 -->
    <el-image :src="item.imageUrl" class="image_carousel"></el-image>
  </el-carousel-item>
</el-carousel>
<template>

我的踩坑记录就是网页的资源文件已经渲染，但是无法看到图片，然后查了半天，最后发现是h3标签的那块儿内容占了位置将我的图片顶了下去！(ಥ﹏ಥ)