1. 程式人生 > >【轉載】VUE的背景圖引入

【轉載】VUE的背景圖引入

position http enter img ack idt tails sdn iba

我現在的項目要將登錄頁面的背景引一圖片做為背景圖片,按原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>

【轉載】VUE的背景圖引入