vue引用图片背景的方法

Vue中引用背景图片的方法：1、通过img标签直接引用图片做背景；2、通过“background: url”的方式对元素添加样式引用背景图片；3、通过import方法，再引用背景图片即可。

Vue中引用背景图片的示例：

第一种方法

通过img标签直接引用图片做背景。

<imgclass="card"src="~@/assets/img/card_bg.png"></img>

第二种方法

通过“background: url”的方式对元素添加样式引用背景图片。

<divclass="card"></div>
<style>
.card{
background:url('~@/assets/img/card_bg.png')centercenterno-repeat;
}
</style>

第三种方法

通过import方法，再引用背景图片。

<script>
importcardPathfrom"@/assets/img/card_bg.png"
exportdefault{
data(){
return{
cardPath:cardPath,
}
}
}
</script>
<divclass="card":style="{backgroundImage:'url('+cardPath+')'}"></div>