el-carousel interval=4000 type=card height=400px el-carousel-item v-for=item in 6 key=item img src=assetsimg1img_1png alt= img src=assetsimg1img_2png alt= img src=assetsimg1img_3p

在组合式 API 中，可以使用import语句来引入静态资源，并在模板中使用。

首先，在组件的<script>标签中使用import语句引入需要的静态资源：

import img1 from "../../assets/img1/img_1.png";
import img2 from "../../assets/img1/img_2.png";
import img3 from "../../assets/img1/img_3.png";

然后，在模板中使用引入的静态资源：

<template>
  <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item v-for="item in 6" :key="item">
      <img :src="img1" alt="" />
      <img :src="img2" alt="" />
      <img :src="img3" alt="" />
    </el-carousel-item>
  </el-carousel>
</template>

注意，使用:src绑定动态数据时，需要在属性名前加上:。

完整的组件代码如下：

<template>
  <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item v-for="item in 6" :key="item">
      <img :src="img1" alt="" />
      <img :src="img2" alt="" />
      <img :src="img3" alt="" />
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import img1 from "../../assets/img1/img_1.png";
import img2 from "../../assets/img1/img_2.png";
import img3 from "../../assets/img1/img_3.png";

export default {
  data() {
    return {
      img1,
      img2,
      img3,
    };
  },
};
</script>

这样就可以在组合式 API 中访问静态资源并实现轮播图了