vue中动态加载图片

vue中加载图片不能直接动态改变图片地址，这样地址会被识别为字符串，需要使用require引入

<template lang="html">
    <section id="tableImg">
        <img class="bigImg" :src="defaultImg" alt="">
        <div class="contentImg">
            <el-row>
                <el-col v-for="(item,index) in images" :span='4' :key="index">
                    <img @click="lookBg(item)" :src="item" alt="">
                </el-col>
            </el-row>
        </div>
    </section>
</template>


<script>
export default {
    data() {
        return {
            defaultImg: require('../../assets/image/pic1.jpg'),
            images: [
                require('../../assets/image/pic1.jpg'),
                require('../../assets/image/pic2.jpg'),
                require('../../assets/image/pic3.jpg'),
                require('../../assets/image/pic4.jpg'),
                require('../../assets/image/pic5.jpg'),
                require('../../assets/image/pic6.jpg'),
                require('../../assets/image/pic7.jpg'),
                require('../../assets/image/pic8.jpg'),
                require('../../assets/image/pic9.jpg')
            ]
        }
    },
    methods:{
        lookBg(val){
            this.defaultImg = val;
        }
    }
}
</script>


<style lang="less">
#tableImg{
    .bigImg{
        width: 100%;
        height: 80%;
    }
    .contentImg{
        width: 50%;
        position: fixed;
        bottom: 20px;
        left: 50%;
        margin-left: -25%;
        img{
            height: 100px;
            width: 120px;
            border: solid 1px #fff;
            cursor: pointer;
            transition: all .5s;
            &:hover{
                // transform: rotate(360deg);
                transform: scale(1.5,1.5) rotate(-10deg);
            }
        }


    }
}
</style>