Comment utiliser l'image img et l'image d'arrière-plan dans le projet Vue

 

cssméthode

Utilisez simplement les backgroundattributs normalement . En cas de problème, vous devez placer la ressource image dans le staticdossier de ressources statiques, et non dans d' assetsautres dossiers comme celui-ci.

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

importméthode

Utiliser l' importimage d'arrière-plan d'importation

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

Utiliser le style en ligne

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

requireméthode

Utilisez pour requireobtenir des photos

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

Affecté à imglasrc

<img :src="imgSrc" />