Chivnk 2022-11-02 17:09 采纳率: 48.1%
浏览 203
已结题

elementui走马灯中图片路径没错,却不显示

朋友们,做了个轮播图用的elementui中的走马灯,找了个教程并排显示4个图片,可是图片路径没错,却显示不出来图片

img

 <div class="carouselBox">
                <el-carousel
                    :loop="true" 
                    indicator-position="outside" 
                    :autoplay="false"  
                    class="carousel"
                    >
                  <el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index">
                    <div v-for="(imgList,index1) in list" :key="index1" class="divSrc">
                      <img class="img1" :src="imgList.img" />
                      <div class="title">{{imgList.title}}</div>
                    x</div>
                  </el-carousel-item>
                </el-carousel>
                </div>

data() {
        return{
            dataList: [],
        };
    },
 methods: {
          
          byEvents() {
                this.dataList = [{
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/周方.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    {
                        img: '../../../public/img/doctor/1.png',
                        title: '标题'
                    },
                    
                    
                    
                ]
                
                let newDataList = [];
                let current = 0
                if (this.dataList && this.dataList.length > 0) {
                    for (let i = 0; i <= this.dataList.length - 1; i++) {
                        if (i % 4 !== 0 || i === 0) {    //数据处理成几张展示
                            if (!newDataList[current]) {
                                newDataList.push([this.dataList[i]])
                            } else {
                                newDataList[current].push(this.dataList[i])
                            }
                        } else {
                            current++
                            newDataList.push([this.dataList[i]])
                        }
                    }
                }
                this.dataList = [...newDataList]

            },
            
            

         
  
        },
        mounted() {
          this.imgLoad()
          window.addEventListener('resize', () => {
            this.bannerHeight = this.$refs.bannerHeight[0].height
            this.imgLoad()
          },false),
  
          this.byEvents();
        },
      }


  .carouselBox .carousel .el-car-item[data-v-8f0ec2ee] {
    display: -webkit-box;
    //justify-content: center;
  }
  .carouselBox {
    text-align: center;
        margin: 0 auto;
        width: 100%;
        //height: 300px;
        .carousel{
            width: 100%;
            height: 400px;
            .el-car-item {
                width: 100%;
                height: 300px;
                display: flex;
                .divSrc{
                    width: 200px;
                    height: 300px;
                    background: #fff;
                    margin-right: 30px;
                    .img1 {
                        width: 100%;
            background: center;
                        height: 150px;
                    }
                    .title{
                        width: 90%;
                        height: 80px;
                        line-height: 80px;
                        margin: 0 auto;
                        text-align: center;
                        font-size: 20px;
                        font-weight: bold;
                        color: #222222;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
                
            }
            ::v-deep .el-carousel__arrow{
            //    background: red !important;
                display: block !important;
                margin-top: 65px;
            }
            
            
        }
        .el-car-item {
            width: 100%;
            display: flex;

            .img1 {
                width: 100%;
                height: 150px;
                margin-right: 20px;
                cursor: pointer;
        background: center;
            }
        }
    }


  • 写回答

4条回答 默认 最新

  • 管那么多 2022-11-02 17:20
    关注

    图片路径都用 require() 包起来 试试

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 11月10日
  • 已采纳回答 11月2日
  • 创建了问题 11月2日

悬赏问题

  • ¥20 大华dss监控平台网络关闭登不进去
  • ¥15 有关AT89C51单片机问题
  • ¥15 请使用蚁群算法解决下列问题,并给出我完整的代码
  • ¥20 关于php录入完成后,批量更新数据库
  • ¥15 请教往复密封润滑问题
  • ¥15 cocos creator发布ios包
  • ¥15 comsol压电材料数据
  • ¥35 用python实现除法算法中goldschmidt算法
  • ¥15 汇编代码转换成C代码
  • ¥15 除法算法中的归一化具体是怎么变的?