vue+element ui 走马灯添加图片+图片自适应

最新推荐文章于 2023-10-26 10:08:05 发布

啾啾尤尤

最新推荐文章于 2023-10-26 10:08:05 发布

阅读量1.7w

点赞数 25

CC 4.0 BY-SA版权

分类专栏： vue element ui 走马灯文章标签： vue

本文链接：https://blog.csdn.net/weixin_43699616/article/details/104686195

本文介绍了如何使用Vue和Element UI组件创建走马灯，并解决图片比例不匹配问题，实现图片自适应显示。通过在APP.vue导入和调用组件，以及调整代码实现图片美观展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
上面是最终效果图~
代码 (zmd.vue) ：

<template>
  <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in imagebox" :key="item.id">
        <img :src="item.idView" class="image">
      </el-carousel-item>
    </el-carousel>
</template>

<script>
  export default{
   
   
    name:'zmd',
    data(){
   
   
      return {
   
   
        imagebox:[{
   
   id:0,idView:require('../assets/imagebox/1.jpg')},
        {
   
   id:1,idView:require('../assets/imagebox/2.jpg')},
        {
   
   id:2