前沿

其实吧，作者在很早之前就遇到过这个问题，当时解决了，因为忙就没有记录下来，现在又再一次遇到了，这次不管怎么样都要抽空记录下来，真的是好记性不如烂笔头。

先看看静态img

静态的img路径直接写你当前图片路径就好了
<img class="Width100 Height100" src="../img/headImage.png">

再看看动态img

我这里是粘了我项目中的一段代码

特别强调

动态的图片一定要放到vue的静态资源文件夹static下，然后引入才有效 或者使用require引入也可以

              <ul>
                    <li v-for="(item,i) in lotterylist" :key="i">
                        <div class="box">
                            <p><img :src="item.img"></p>
                            <p>{{item.title}}</p>
                        </div>
                        <div class="mask Width100 Height100" :class="i == index ? 'on' : ''"></div>
                    </li>
                </ul>
<script>
export default {
        data(){
             return{
             lotterylist: [{
            //这里要注意的是如果你还是想=像静态路径那么写的话图片是出不来的，所以一定要把图片放到vue的静态资源文件夹下，才有效。就像第二中写法一样
                img: "../img/headImage.png",
                img: "@/../static/img/fanxianquan.png",
                title: "返现券",
            }, {
                img: "@/../static/img/hongbao.png",
                title: "红包",
            }, {
                img: "@/../static/img/lihe.png",
                title: "实物大奖",
            }, {
                img: "@/../static/img/xiexie.png",
                title: "谢谢参与",
            }, {
                img: "@/../static/img/dikouquan.png",
                title: "抵扣券",
            }, {
                img: "@/../static/img/hongbao.png",
                title: "红包",
            }, {
                img: "@/../static/img/fuliquan.png",
                title: "福利券",
            }, {
                img: "@/../static/img/hongbao.png",
                title: "红包",
            }]
                 }
               }



}
</script>

结束语

这次的这个坑着实让我浪费了不少时间，以前犯过的错再次出现，所以一定要养成多记录的习惯。最少能加深你的记忆。相信跟我一样犯错的人不少吧。