对于普通的 .png 图片，可以使用以下方法
- HTML结构法
此处的 "~"是用来让css-loader去解析的
<img src='~@/assets/avatar.png'/>
- 当做模块引入使用
<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转义后的JS文件只能使用第二种方法
背景图片导入
- import导入文件使用
<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中使用后一直报错，或者图裂开，可以使用一个组件，将其进行传参渲染。
image.png
如有问题请留言，我会及时改正。
谢谢你 !
