vue cli3-4 绑定图片方法大全

是不是经常头疼vue cli项目怎么绑定图片，是不是感觉为什么路径是对的，但是就是会报错？

那么我们就来一一讲解，vue cli怎么才能绑定图片。

style标签中引用图片

我们的资源存放路径就两个：

1. 纯静态的public文件夹
2. 动态的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的引入有几种方式：

1. import引入
2. data中require引入
3. 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中。