使用vue实现轮播图的时候，使用v-for发现获取不到图片？两种解决办法！

先将有问题的代码贴出来：

<template>
    <div class="videomenu">
        <div class="left">
            <!-- 轮播图 -->
                <a href=""><img v-for="(item,index) in imgs" :key="index" :src="item" v-show="index==options"></a>
            <!-- 轮播图下方的按钮 -->
            <ul class="list">
                <li v-for="(src,index) in imgs" :key="index" :class="index==options?'selected':''" @click="gotoPage(index)">{
   
   {index+1}}</li>
            </ul>
        </div>
        <div class="right">
            <ul class="rightul">
                <li class="rightulitem" v-for="(item,index) in list" :key="index"><a href="" class="righta"></a></li>
            </ul>
        </div>
    </div>
</template>

 

<script>
export default {
    name:'VideoMenu',
    data(){
        return{
            list:[1,2,3,4,5,6,7,8],
            imgs:['../../images/blue.png','../../images/green.png','../../images/gray.png','../../images/brown.png','../../images/yellow.png'],
            options:0,
            timer:null
        }
    },
    methods:{
        setTime(){
            setInterval(this.changeImages,3000)
        },
        changeImages(){
            this.options++;
            if(this.options == this.imgs.length){
                this.options = 0;
            }
        },
        gotoPage(index){
            this.options = index;

        },
        onmousemove(){
            clearInterval(this.timer);
        }
    },
    created(){
        this.setTime();
    }
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
.videomenu{
    position: relative;
}
ul{
    list-style: none;
}
.list{
    position: absolute;
    bottom: 10px;
    right: 5px;
}
.list li{
    height: 20px;
    width: 20px;
    border:1px solid #969591;
    border-radius: 50%;
    background-color: #969591;
    float: left;
    margin-left: 5px;
    text-align: center;
    color: white;
    cursor: pointer;
}
.list .selected{
    background:#8F9E9E;
	color:black;
}
.right{
    position: absolute;
    top:0;
    left: 720px;
}
.rightul {
    display: flex;
    flex-wrap: wrap;
}
.righta{
    display: inline-block;
    width: 206px;
    height: 115px;
}
.rightulitem{
    width: 206px;
    height: 115px;
    background-color: cornflowerblue;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 20px;
}
.left{
    width: 559px;
    height: 242px;
    /* background-color: brown; */
    margin-left: 150px;
    margin-right: 15px;
    position: relative;
}
</style>

我使用的是单文件组件，所以将上述vue的三个部分都贴了出来，目前的画面效果如下：

下面的数字是可以实现轮播的，但是图片就是获取不到。通过询问公司同事才明白（我只是个实习生），原来是由于webpack在打包的时候，生成一个dist文件夹，然后webpack会将这些图片的路径自动随机的加上一串哈希值，比如：动态.f94db46f.png ，中间的那串就是哈希值了，而且每次编译的时候都是不一样的，所以不要妄想在标签中写死图片打包后的路径了。

解决办法1:   使用require

template标签和style标签没有变化，变化的只是script标签中的部分内容：

<script>
var img1 = require('../../images/blue.png')
var img2 = require('../../images/green.png')
var img3 = require('../../images/gray.png')
var img4 = require('../../images/brown.png')
var img5 = require('../../images/yellow.png')

export default {
    name:'VideoMenu',
    data(){
        return{
            list:[1,2,3,4,5,6,7,8],
            imgs:[img1,img2,img3,img4,img5],
            options:0,
            timer:null
        }
    },

然后在页面就可以正常显示出图片的内容了，如下：

解决办法2：使用import

<script>
import img1 from '../../images/blue.png'
import img2 from '../../images/green.png'
import img3 from '../../images/gray.png'
import img4 from '../../images/brown.png'
import img5 from '../../images/yellow.png'

export default {
    name:'VideoMenu',
    data(){
        return{
            list:[1,2,3,4,5,6,7,8],
            imgs:[img1,img2,img3,img4,img5],
            options:0,
            timer:null
        }
    },

和require几乎是一样的，至此两种方法介绍完毕，大家要是还有什么补充，欢迎评论区留言！