.vue文件中style中如何正确引入assets中的图片

在.vue 文件中的style中的css中想引入assets文件夹中的图片资源，总是报错
这是某个vue组件中style中的css，这样根据相对路径就是获取不到图片资源

 .active {
      background: #111c24 url('../../assets/icon/login_active.png') no-repeat center;
  }

解决办法：

 .active {
     background: #111c24 url('~@/assets/icon/login_active.png') no-repeat center;
 }

注意：

@ is an alias to /src
使用vue-cli脚手架的话，会自带这个配置；
如果是自己使用webpack的话，可以在webpack.base.conf.js文件中设置一个webpack的路径别名

resolve: {
    alias: {
        '@': path.resolve(__dirname, '../src')
    }
}

原因分析：

开发模式下，图片地址就是相对当前的vue文件地址，生产模式下的图片地址是在发布路径下的。
打包后引用图片的路径
  编译后所有非require引入的图片都被编译到/dist/img/目录下面，并且重命名，引用路径亦已改变，路径随图片文件位置和引用图片的文件的位置而调整了。
  而require引入的图片则生成了图片base64编码，图片路径就是图片base64编码。

1、背景图路径
   编译打包后生成的背景图路径格式为: ../img/##.png，
   编译打包后所有的样式代码在css目录的文件中，引用图片的文件是样式文件，引用图片的路径是样式文件相对于图片位置的路径，所以由'../img'开头。

2、图片路径
   编译后的<img>引用路径格式是: /img/##.png，和背景图的引用路径不一样。
   引用图片的文件是html，html文件在根目录，所以引用路径由'/img'开头。

3、图片base64编码
   使用require引入的图片，经编译后直接生成了图片base64编码。

推荐的图片存放方式

1 如果图片小于8k（webpack配置里设置压缩大小），会被压缩成base64格式，建议直接放在这个组件同级目录

background-image: url(./img/icon-1.png);

2 如果图片比较大，可放在项目根目录的public/images里面，统一管理

background-image: url(/images/banner.png);