情况1：图片在/public目录下
把图片放到与index.html同级的目录下
情况1-1.png
方式1
因为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目录下
把图片放到/src/assets目录下
情况2-1.png
文件层级关系见下图
情况2-2.png
已知我们在vue中配置@为src的目录
情况2-3.png
方式1
最简便的方式就是直接在src内用~@表示src路径
<img src="~@/assets/login-bg.png">
方式2
在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>
方式3
在vue文件中使用style标签写css样式
<!-- 在div标签上绑定class，以便使用css元素选择器 -->
<div class="login-container"></div>
<style scoped>
.login-container {
/*
* 当前vue文件在login文件下，我们梳理一下通过相对路径找到图片文件
* login ↑ views ↑ src ↓ assets ↓ login-bg.png
* 于是我们得出如下路径，经过测试可以成功引入图片
* 这里需要提一下，这里路径是编写代码时的路径，vue在编译打包时会对路径进行处理
*/
background-image: url('../../assets/login-bg.png');
/*
* 在vue文件中的style标签内，也可以使用@表示src目录，不过要在前面加~，也就是~@
* 使用~@后我们就可以快速写出下面的路径了
*/
background-image: url('~@/assets/login-bg.png');
/* 此行样式：背景图会按比例缩放填充满整个背景（能保证背景图不变形） */
background-size: cover;
}
</style>
