是不是经常头疼vue cli项目怎么绑定图片，是不是感觉为什么路径是对的，但是就是会报错？
那么我们就来一一讲解，vue cli怎么才能绑定图片。
style标签中引用图片
我们的资源存放路径就两个：
- 纯静态的public文件夹
- 动态的src/assets文件夹
assets里的图片，如果很小的话，webpack打包的时候会将其转为base64，这样就减少了文件的请求数量，但是相对来说，如果特别多小图片，那么反而会增加js文件的大小，因为base64并不是压缩，如果文件很大，base64占用的存储可能会比原文件还要大一些。
所以，优化很重要，但是要看项目需求。
引入public中的资源
首先我们要知道，public文件夹中的资源，在打包的时候，他会直接释出，也就是说，如果public下有一个images文件夹，你打包后，public文件不存在，而images文件夹将被抛出到最上层。
所以，我们如果需要直接引入这个public下的images下的图片。
路径要写成如下：
.content {
background-image: url("/images/bg.png");
}
实际上他引用的是：public/images/bg.png
当然个人并不推荐这样写，因为会有一种情况导致出现问题，那就是打包后的项目，存放线上时并不是根目录。
那么images就不会存在于最上层，就会出现资源404的情况。
怎么办？
配置publicPath
官方说要配置一下publicPath
打开vue.config.js文件，在里面添加一个publicPath属性。
module.exports = {
publicPath: "./",
}
./表示所有的资源都相对路径，但是style里面的css使用的路径并不会自动变更，所以，这样只能保证页面不会加载时空白，所以，要么使用变量的形式引入路径前缀，要么，自己固定一个路径。
固定路径前缀
因为变量是写在script中，所以这块就先不说，先讲style里面的处理方法
.content {
background-image: url("https://www.xxxx.xxx/xxx/xx/images/bg.png");
}
https://www.xxxx.xxx/xxx/xx就是你项目的网址+项目所在的目录。
这样的话每次写都要加个很长的地址段，很麻烦，所以我们可以采用一些方法。
就以scss来讲，我们可以配置一个全局变量scss文件，在这个文件里面我们配置一个变量baseUrl，然后每次使用的时候拼接一下
$baseUrl: "https://www.baidu.com";
.content {
background-image: url("#{$baseUrl}/images/bg.png");
}
如何配置全局scss变量，本博客搜索全局scss即可，有对应的文章。
style引入src/assets下的资源
如果你的图片都很大的话，就不用在意base64了。
assets有两种引入方式：
1. 相对路径法
.content {
background-image: url("../../../assets/images/bg.png");
}
相对于当前vue文件，一层一层往上走，这样如果路径不深的话好说，太深了就不行了。
2. 路径变量名
众所周知，@符号被用来表示src路径，我们在css中也可以使用这个
.content {
background-image: url("~@/assets/images/bg.png");
}
css中使用@必须在前面加~波浪符。
assets中的图片，不管你文件存放在什么样的目录中（例：assets/images），打包后统一存在在dist/img目录下。且css中的引用路径也会自动变更。
template中引用资源
引入public中资源需要创建变量路径，在script中会讲到
<div :style="{'backgroundImage':`url(${require('@/assets/images/bg.png')})`}">
</div>
vue绑定变量的方式，通过require来引入图片。
这种相对来说省事，但是比较占据代码，可以和变量配合使用。
比如我们在data中创建一个变量：
data () {
return {
bg: require('@/assets/images/bg.png')
}
}
<div :style="{'backgroundImage':`url(${bg}`}">
</div>
简单一点的：
<img :src="require('@/assets/images/bg.png')">
这样的也是可以的。
template就这两种方式引入资源。
script 引入资源
不建议引入public中资源，不方便，也没有官方示例
script的引入有几种方式：
- import引入
- data中require引入
- data中存放变量路径，引用时拼接
1. import引入
<script>
import bg from "@/assets/images/bg.png";
export default {
data(){
return {
bg,
}
}
}
</script>
import 引入的资源，如果要在template中使用，我们需要在data中创建一个变量用于保存资源，如果只在script中使用，就不用再data中创建变量保存，直接使用import时所命名的名字。
<div :style="{'backgroundImage':`url(${bg}`}">
</div>
2. data中require引入
import引入相对来说太麻烦了，引入完还要创建变量，所以如果想省点事，可以使用这种方式
<script>
export default {
data(){
return {
bg: require("@/assets/images/bg.png"),
}
}
}
</script>
<div :style="{'backgroundImage':`url(${bg}`}">
</div>
这样也是可以的。
3. data中存放变量路径，引用时拼接
这种方式适用于public中的资源。假设我们的bg存放在public/images下
<script>
export default {
data(){
return {
public: process.env.BASE_URL,
}
}
}
</script>
<div :style="{'backgroundImage':`url(${public}images/bg.png`}">
</div>
变量public会自动生成public文件夹的路径，且末尾是带/斜杠的，所以写的时候不要再images前加斜杠了。
以上就是对vue cli绑定图片的方法大全，大家可以按需使用，相对来说assets中存放图片是一个趋势，因为方便，如果是小图片多的话，可以考虑合并成一个大图使用，这样也能存放于assets中。
