對于普通的 .png 圖片，可以使用以下方法
- HTML結(jié)構(gòu)法
此處的 "~"是用來讓css-loader去解析的
<img src='~@/assets/avatar.png'/>
- 當(dāng)做模塊引入使用
<template>
<img :src='png'/>
</template>
import xxx from '@/assets/xxx.png'
export default {
data(){
return {
png:xxx
}
}
}
- 可以在生命周期中賦值
mounted(){
this.img = require("@/assets/xxx.png")
}
對于由base64轉(zhuǎn)義后的JS文件只能使用第二種方法
背景圖片導(dǎo)入
- import導(dǎo)入文件使用
<template>
<div :style="{background:'url(' + img + ')'}"> </div>
</template>
<script>
import xxx from '@/assets/xxx.png'
export default {
data(){
return {
img:xxx
}
}
}
</script>
- 在<style>中使用
<style>
.bgImg{
background:url("~@/assets/xx.png")
}
</style>
2023年5月30日追更：
如果在template中使用后一直報錯，或者圖裂開，可以使用一個組件，將其進(jìn)行傳參渲染。
image.png
如有問題請留言，我會及時改正。
謝謝你 !
