Comment changer l'image d'arrière-plan dans vue.js

Comment changer l'image d'arrière-plan dans vue.js : introduisez le style via le style en ligne, utilisez la méthode [require()], le code est [

< /div>] .

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Comment changer l'image d'arrière-plan dans vue.js :

Dans le développement du projet Vue, nous ajoutons souvent des images d'arrière-plan à la page. Cependant, lorsque nous ajoutons l'image d'arrière-plan au style, la compilons, la conditionnons et la configurons sur le serveur, l'image n'est pas correcte en raison de la résolution du chemin. problèmes. Il est affiché avec le style CSS suivant :

background:url("../../assets/left-bg.jpg");

À ce stade, nous devons envisager d'utiliser d'autres méthodes. Node fournit un moyen plus efficace de résoudre ce problème. suit :

est défini dans data comme suit :

  data() {
    return {
      leftBg: {
        background: "#235d8b url(" + require("./assets/left-bg.png") + ") no-repeat scroll 0 bottom",
      },
      topBg: {
        background: "#235d8b url(" + require("./assets/top-bg.png") + ") no-repeat scroll right 0",
        height: '80px'
      }
    }
  }

où la méthode require() est utilisée, et require() est la méthode node.js.

Introduire des styles via des styles en ligne :

<div :style ="leftBg"></div>

Recommandations d'apprentissage gratuites associées : JavaScript(Vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!