backgroundImage路径问题vue图片的引入方式

正确的应该这样写：

data() {

 return {

  shouye:'url(' + require('../../assets/images/shouye/index2x.png') + ')',

  fenlei:'url(' + require('../../assets/images/shouye/fenlei2x.png') + ')',

  search:'url(' + require('../../assets/images/shouye/search2x.png') + ')',

  shopcart:'url(' + require('../../assets/images/shouye/gouwuche2x.png') + ')',

  mine:'url(' + require('../../assets/images/shouye/I2x.png') + ')'

 }

}

使⽤

require()

⽅法，

require()

是

node.js

⽅法

import Bg2 from '@/../static/images/logo2.png'

export default {

    name: 'App',

    data () {

        return {

            bg2: Bg2,

        }

    }

}

    .demo{width: 100px;margin: 50px auto;}

    .img1{

        width: 100px;

        height: 100px;

        background: url('~@/../static/images/logo1.png') center center no-repeat;

        background-size: 100px auto;

    }

    .img2{

        width: 100px;

        height: 100px;

        background-position: center center;

        background-repeat:  no-repeat;

        background-size: 100px auto;

    }

上述代码中，出现的诸如：

~@/ 

和

 @/ 

，如果删除后，测试效果也正常，你也可以都去掉，不影响。