• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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>

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
  • 本文分类:vue 项目实战
  • 本文标签:vuevue cli绑定图片引入资源
  • 流行热度:已超过 107 人围观了本文
  • 最后更新:2020年10月26日 - 14时49分02秒
  • 发布日期:2020年10月26日 - 14时49分02秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码