木灵鱼儿

木灵鱼儿

阅读:773

最后更新:2020/12/02/ 22:50:40

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中。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 773

相关文章