When using vue to realize the carousel image, use v-for to find that the image cannot be obtained? Two solutions!

First post the problematic code:

<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>

I use a single-file component, so I posted all three parts of the above-mentioned vue. The current screen effect is as follows:

The following numbers can be rotated, but the pictures are not available. I found out by asking my colleagues in the company (I’m just an intern) that it turned out that webpack generated a dist folder when packaging, and then webpack would automatically add a string of hash values ​​to the paths of these images at random, for example: Dynamic.f94db46f.png, the string in the middle is the hash value, and it is different every time you compile, so don't try to write the path of the packaged image in the tag.

Solution 1:    use require

The template tag and the style tag have not changed, only part of the content in the script tag has changed:

<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
        }
    },

Then the content of the picture can be displayed normally on the page, as follows:

Solution 2: use 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
        }
    },

It is almost the same as require. So far, the two methods have been introduced. If you have anything to add, please leave a message in the comment area!