【转载】VUE的背景图引入

我现在的项目要将登录页面的背景引一图片做为背景图片，按原jsp中的写法，发现无法找到背景图片，最后从网上查资料，采用上面的写法，成功显示出背景图片，参考网址

https://blog.csdn.net/TingiBanDeQu/article/details/78521521

内容

<template>
<div>
<!-- 成功引入的三种方法： -->
<!-- 1 -->
<img src="~@/da.jpg" width="100">
<!-- 2 -->
<div class="img1"></div>
<!-- 3 -->
<div class="img2" :style="{backgroundImage: 'url(' + img + ')' }"></div>
</div>
</template>

<script>
import Img from '@/da.jpg'

export default {
data () {
return {
img: Img,
}
}
}
</script>

<style>
.img1{
width: 100px;
height: 100px;
background: url('~@/da.jpg') center center no-repeat;
background-size: 100px auto;
}
.img2{
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100px auto;
}
</style>