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

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

 <div class="carouselBox">
                "true" 
                    indicator-position="outside" 
                    :autoplay="false"  
                    class="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">
                      class="img1" :src="imgList.img" />
                      <div class="title">{{imgList.title}}div>
                    xdiv>
                  item>
                
                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;
            }
        }
    }

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

如果是Chrome浏览器 按F12 进入开发者模式，查看下Network 或 Console 查看下图片是否正常加载就行。

如果network 是 404 那就是图片路径的问题

加个 require试试
{
img:require( '../../../public/img/doctor/1.png'),
title: '标题'
},
或者

 <img class="img1" :src="require(imgList.img)" />

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7807738