vue html引入图片,vue引入图片的几种方式

情况1：图片在/public目录下

把图片放到与index.html同级的目录下

情况1-1.png

方式1

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

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

把图片放到/src/assets目录下

情况2-1.png

文件层级关系见下图

情况2-2.png

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

情况2-3.png

方式1

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

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

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

backgroundImgUrl: require('@/assets/login-bg.png')

方式2

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

.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;

}