Vue项目中使用img图片和background背景图的使用方法

css方法

正常使用background属性即可，如有问题，应把图片资源放入static静态资源文件夹,不是assets之类的其他文件夹。

<div class="imgSrc"></div>
<style>
.imgSrc{
    background-image:url("@/../static/images/bg.png")
}
</style>

import方法

使用import导入背景图片

import imgSrc from "@/../static/images/bg.png"
export default {
    data () {
        return {
            imgSrc: imgSrc,
        }
    }
}

使用内联样式

<div :style="{backgroundImage:'url('+imgSrc+')'}"></div>

require方法

使用require获取图片

export default {
    data () {
        return {
            imgSrc: require("@/../static/images/bg.png"),
        }
    }
}

赋值为img的src

<img :src="imgSrc" />