vue样式 引入图片_Vue引入图片的几种方式

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

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

方式1

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

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

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

文件层级关系见下图

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

方式1

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

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

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

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

方式2

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

.login-container {