Web前端最新转载：Vue引入图片的几种方式_vue2 index，IBM大面积辞退40岁+的员工

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片

<!-- img标签引入图片：图片名称，这种属于相对路径，在index.html的同级目录下查找此图片 -->
<img src="login-bg.png">
<!-- img标签引入图片：'/' + 图片名称，这种属于绝对路径，/表示编译后的dist文件夹 -->
<img src="/login-bg.png">
<!-- style样式引入图片时，需要用url来处理图片路径，url内部写法和img的src相同 -->
<div style="background-image: url('login-bg.png');"></div>
<div style="background-image: url('/login-bg.png');"></div>

情况2 图片在/src/assets目录下

文件层级关系见下图

已知我们在vue中配置@为src的目录

方式1

在vue组件中定义一个变量，变量值为”使用require()方法获取的文件路径”。

require()方法是将编写代码时定义的路径转换为编译打包后的路径。

// 在vue组件中定义此变量，组件创建成功后该变量值为'/static/img/login-bg.df6a3174.png'
backgroundImgUrl: require('@/assets/login-bg.png')

<!-- 在img标签中可以直接使用backgroundImgUrl变量作为图片路径 -->
<img :src="backgroundImgUrl">
<!-- 在style中要把backgroundImgUrl变量拼接到url()中，才能正常引入图片 -->
<div :style="{ backgroundImage: `url(${backgroundImgUrl})` }"></div>

方式2

在vue文件中使用style标签写css样式

<!-- 在div标签上绑定class，以便使用css元素选择器 -->
<div class="login-container"></div>

<style scoped>
.login-container {
    /*


### 最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**