Vue 引入图片的几种方式

引入背景图片错误分析：
使用vue添加背景图片时，刚开始是加在css样式上，然后路径也没错，但是浏览器上会把图片路径转成base64，但是图片大小超过阈值就不转了，直接引入背景图片用在浏览器上时,由于路径解析的问题,图片并不能够正确的显示出来。可以使用以下几种方式

 <div style="width:100px;height:100px;
 backgroundImage:url('../../assets/bg.jpg')"></div>
background: url('图片相对当前的路径') center top no-repeat
在Vue中图片路径会经过编译，就会发生改变所以无法通过backgound直接引入
所以在Vue中应该是background: url('图片相对当前vue文件的路径') center top no-repeat  
 这个图片路径很重要，url是图片相对于当前vue文件的路径，而不是图片相对于样式文件的路径。
 所以无法style直接引入图片的当前路径我们需要在Vue里面重新定义一下路径再引入
 （1.用类名，2.data里面重新定义，3.require）

引入assets里面的图片可以设置一个webpack的路径别名
webpack.base.conf.js中
resolve: {
    alias: {
        '@src': path.resolve(__dirname, '../src/assets')
    }
}
backgroundImage:"url("+require('@assets/bg.jpg')+")",
这样简单便捷，配置项只要修改成功必须重新启动项目重新加载

1、将data里面的背景图片动态添加进来
<div :style="imgStyle"></div>
imgStyle:{
		width:"100px",
		height:"100px",
		backgroundImage:"url("+require('../../assets/bg.jpg')+")",
		backgroundSize:"cover"
	}
2、import 引入外部图片做背景图动态绑定
 import img from "@/../static/bg.jpg";
 data:{img:img}
 <div :style="{width:'100px',height:'100px',
 backgroundImage:'url(' + img + ')' }"></div>
3、通过绑定类名实现动态绑定背景图
<div class="styleImg"></div>
.styleImg{
	   width:100px;
	   height:100px;
	   background-image:url('../../assets/bg.jpg')
}

打包之后图片无法出现解决方法：
在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: ‘…/…/’

Vue引入前景图片的几种方式
一些相关知识

1.引入外部的图片在data中定义 data:{img:img}
import img from "@/../static/bg.jpg";
<img style="width: 100px;100px" :src="img" alt="">
2.直接引入图片的相对路径可以出现
<img style="width: 100px;100px" src="../../assets/bg.jpg" alt="">
3.如果在data中引入先对路径不会出现需要加require引入相对路径这样会进行64位码编译
data:{
qjt:'../../assets/bg.jpg'  不会生效
qjt:require('../../assets/bg.jpg'),可以生效
}
<img style="width: 100px;100px" :src="qjt" alt="">
4.通过js方法动态添加图片
 <img style="width: 100%;height: 100%;" :src="require('../../assets/'+xqSrc)" alt />
 sendText(text, num) {
      this.xqTitle = text;
      this.xqSrc="HomePage/echarts" + num + ".png"
},

打包后引用图片的路径
  编译后所有非require引入的图片都被编译到/dist/img/目录下面，并且重命名，引用路径亦已改变，路径随图片文件位置和引用图片的文件的位置而调整了。
  而require引入的图片则生成了图片base64编码，图片路径就是图片base64编码。

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

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

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