Problèmes liés à l'utilisation de la référence de chemin absolu dans vue

Cet article vous présente principalement la solution au problème de l'utilisation de chemins absolus pour référencer des images dans vue cli. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. j'en ai besoin Jetons un coup d'oeil avec l'éditeur ci-dessous.

Préface

Qu'est-ce que Vue C'est un framework progressif pour construire des interfaces utilisateur (explication sur le site officiel). cadre ? , la réponse simple est que c'est le moins préconisé. Ces concepts ne peuvent être vus et compris que par soi-même. Mille lecteurs donneront mille Hamlets, mais il n'y a pas beaucoup d'explications. La documentation officielle de Vue est très complète.

Vue est un framework front-end (framework progressif) populaire au cours des deux dernières années. Cet article vous donnera une introduction détaillée au problème de l'utilisation de chemins absolus pour référencer des images dans vue cli, et le partagera pour. votre référence et votre étude. Ci-dessous Pas grand chose à dire, regardons ensemble.

Texte :

L'utilisation de chemins absolus dans la page peut être introduite en utilisant require() dans js

data (){
 return {
  src: require('IMAGES/banner.jpg')
 }
}

<img :src="src">

Il semble que les chemins absolus ne puissent pas être utilisés dans les styles, à moins que vous ne mettiez toutes les ressources d'image en statique, puis vous puissiez les référencer comme ceci

background: url("/static/images/banner.jpg") no-repeat;

Cependant, après les avoir mises en statique, webpack copiera uniquement les ressources dans le répertoire de publication sans optimiser les petites images en base64.

Afin de prendre en compte les deux aspects, les ressources image peuvent être optimisées, il n'est donc toujours pas adapté de mettre les ressources image en statique. Cependant, lors de l'écriture de styles dans la balise style de la page vue, à mesure que le répertoire s'enfonce, le chemin de référence peut être :

background: url("../../../images/banner.jpg") no-repeat;

Il existe une méthode qui semble éviter certains problèmes :

Mettez les fichiers de style dans le dossier de style, utilisez des chemins relatifs pour les ressources d'image de style, puis utilisez l'attribut src pour introduire le style dans la balise de style, comme ceci Vous pouvez éviter de renvoyer trop de calques~~~

── src
 ── images
  ── banner.jpg
 ── style
  ── index.scss

/*style*/
background: url("../images/banner.jpg") no-repeat;

<style src="STYLE/index" lang="scss"></style>

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment ajouter un tableau à un objet en js

Comment créer un processus de projet complet à l'aide de gulp

Utiliser axios pour télécharger des fichiers dans vue

Comment agrandir les images en JavaScript

Comment pour basculer entre les styles dans vue

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!