Définir l'image d'arrière-plan dans Vue

Je vais maintenant partager avec vous une méthode de définition des images d'arrière-plan dans les projets Vue. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Dans le développement du projet Vue, nous ajoutons souvent des images d'arrière-plan à la page. Cependant, après avoir ajouté l'image d'arrière-plan au style, l'avoir compilée, empaquetée et configurée sur le serveur, en raison de problèmes de résolution de chemin, l'image Il ne peut pas être affiché correctement, comme le montre le style CSS suivant :

background:url("../../assets/head.jpg");

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

.

1. Définissez-le comme suit dans les données :

 export default {
 name: 'productdetailspage',
 data() {
  return {
   note: {
   backgroundImage: "url(" + require("../../assets/save.png") + ")",
   backgroundRepeat: "no-repeat",
   backgroundSize: "25px auto",
   marginTop: "5px",
   },
  }
 },

2. Introduisez le style via le style en ligne .

<p class="note" :style ="note"></p>

Cela résoudra parfaitement ce problème.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

En implémentant la requête http et en chargeant l'affichage dans Vue2.0

Comment apprendre les modules process et child_process dans node (Tutoriel détaillé)

Méthode de requête inter-domaines via jQuery+JSONP (Tutoriel détaillé)

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!