【轉載】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>