【转载】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{
100px;
height: 100px;
background: url('~@/da.jpg') center center no-repeat;
background-size: 100px auto;
}
.img2{
100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100px auto;
}
</style>

原文地址:https://www.cnblogs.com/w-essay/p/9491623.html