Comment introduire des images dans l'échafaudage vue-cli (code)

Le contenu de cet article explique comment introduire des images (code) dans l'échafaudage vue-cli. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Méthode d'importation

Première étape : importer la modification à partir du « chemin » dans le fichier .vue (le chemin est le chemin relatif entre l'image et .vue)

Étape 2 : Définir une modification d'attribut dans l'objet de données, la valeur correspond à modifier

Étape 3 : Lier les attributs à la balise dans le modèle

Actualisez enfin l'interface pour voir l'effet !

2. Méthode statique

Étape 1 : Placez l'image dans le dossier statique, définissez l'attribut pro_img dans l'un des objets de données, et la valeur de l'attribut est le chemin relatif entre l'image et .vue

Étape 2 : Lier les attributs à la balise dans le modèle

Actualiser pour voir l'effet

Résoudre le problème d'erreur de chemin d'image d'arrière-plan CSS du composant Vue

Le principe est que vous utilisez vue-cil, puis recherchez ExtractTextPlugin.extract({}) dans utils.js dans le répertoire de construction et ajoutez-y l'attribut suivant pour résoudre le problème parfaitement : publicPath : '.. /../'

Explication Le fichier

sera finalement empaqueté et compressé en js. Lors de l'exécution, le chemin relatif dans le CSS a changé pour pointer vers le répertoire racine, donc une erreur de chargement se produit.

Ce qui suit est une explication de ce plugin.

extract-text-webpack-plugin

Fonction : L'objectif principal de ce plug-in est d'extraire les styles CSS et d'éviter le trouble de chargement des styles de page causé par les styles d'empaquetage dans js.

Paramètres du plug-in : Le plug-in a trois paramètres avec les significations suivantes :

use : fait référence au type de chargeur nécessaire pour compiler le fichier Ici, depuis le fichier source. est .css, on choisit css-loader
fallback : Quel chargeur est utilisé pour extraire le fichier css après compilation
publicfile : utilisé pour écraser le chemin du projet et générer le chemin du fichier css

Recommandations associées :

vue- Comment utiliser l'initialisation de l'échafaudage cli

Analyse graphique et textuelle Comment utiliser l'échafaudage vue-cli

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!