Quelles sont les méthodes pour les chemins de référence dans les fichiers uniques Vue ?

Cet article vous présente principalement les informations pertinentes sur le traitement du chemin de référence dans un seul fichier Vue. 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 que tout le monde puisse apprendre ou utiliser vue.js. Amis qui en ont besoin Apprenons avec moi.

Préface

Le composant de fichier unique de Vue est très couramment utilisé lors de l'utilisation de Vue, et dans le processus de développement de fichier unique de Vue, dans le fichier Le modèle peut impliquer le traitement des chemins de fichiers, tels que , le traitement de l'arrière-plan dans le style, etc. Ce qui suit traite du traitement src de dans plusieurs scénarios différents et explique comment référencer correctement les ressources statiques (telles que le traitement d'image) pendant le processus de développement à l'aide de vue+webpack.

Comme indiqué ci-dessous, des exemples de référencement de chemins d'image dans différents scénarios sont donnés dans le composant de fichier unique ci-dessous (les ressources statiques d'image sont stockées dans src/assets/small.png) :

<template>
 <p id="app">
 <!-- 1. 模版中src选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中src选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中src选项绑定html绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中src选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片资源测试">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 };
 },
}
</script>

Les extraits de code ci-dessus montrent comment utiliser la balise img pour référencer les ressources d'image dans le composant de fichier unique vue dans quatre scénarios. Bien entendu, ces quatre méthodes ne permettent pas toutes de charger correctement les ressources d’image.

Premier cas :

est directement lié à l'attribut src avec un chemin relatif dans le modèle. Dans ce cas, la ressource image peut. être chargé correctement. Nous savons que dans le processus de traitement des composants de fichier unique de vue par Webpack, vue-loader est principalement responsable du traitement des fichiers *.vue. La section sur le traitement des chemins de ressources vue-loader dans la documentation de vue-loader explique comment vue-loader gère les chemins de ressources dans les modèles. Par exemple : , background: url(), @import, etc. seront traités comme des dépendances de module. C'est-à-dire que dans ces cas, vue-loader gère automatiquement la référence de ressource du chemin et le remplacement final du chemin. Le traitement de img est le suivant :

<img src="./logo.png">

sera compilé par le compilateur de modèle vue en :

createElement('img', { attrs: { src: require('./logo.png') }})

Cela explique également pourquoi le contenu de l'image peut être affiché correctement dans le cas 1 , ce qui est dû au fait que vue-loader nous aide automatiquement à introduire les ressources et à remplacer le chemin.

Cas 2 :

La variable de chaîne de chemin relatif est liée à l'attribut src dans le modèle. Dans ce cas, l'image ne peut pas être. affiché normalement. La raison en est que vue-loader ne peut pas identifier si la variable est une chaîne de chemin, il n'y a donc aucun problème avec vue-loader introduisant automatiquement des ressources et le remplacement de chemin. Dans ce cas, le modèle compilé est toujours une chaîne de chemin relatif. Évidemment, sans l'introduction de la ressource correspondante et le mauvais chemin, l'image ne peut pas être affichée correctement.

Situation 3 :

De nombreuses personnes essaient d'utiliser l'introduction de variable de chemin absolu lorsque le chemin relatif ne peut pas être affiché correctement. Dans ce cas, l'image ne peut pas être affichée car la ressource image n'a pas été introduite manuellement. Remarque : De nombreux étudiants essaient d'introduire manuellement des ressources, puis de lier src en fonction de la variable de chemin absolu. Ils constatent qu'il existe effectivement des ressources référencées sous le chemin dist/static/img/, mais le chargeur d'URL dans le modèle webpack vue-cli. ne fonctionne pas pour les fichiers de type img Lors du chargement, le traitement des valeurs de hachage est ajouté. Dans ce cas, même si nous lions une variable de chemin absolu, nous ne pouvons toujours pas référencer correctement l'image car elle ne peut pas correspondre correctement au fichier image auquel la valeur de hachage est ajoutée. Dans ce cas où les images doivent être introduites manuellement, l’approche de la situation 4 est recommandée.

Cas 4 :

L'attribut src dans le modèle est directement lié à la ressource image introduite manuellement. Dans ce cas, l'image peut. s'afficher correctement. Cette méthode est également utilisée par vue-loader lors du traitement des ressources correspondant aux chemins importés automatiquement.

Pour résumer, dans le composant vue single file, la clé pour afficher correctement une image est :

• Si la ressource image est requise ou importée, elle sera utilisé par l'url -loader de webpack est traité dans le répertoire final

• L'attribut img src doit être remplacé par le chemin final de la ressource image

Les deux points ci-dessus sont indispensables. La raison pour laquelle l’image peut s’afficher correctement dans les cas un et quatre est que les deux conditions ci-dessus sont remplies dans les deux cas. Dans le premier cas, vue-loader l'a fait automatiquement pour nous, et dans le quatrième cas, nous l'avons fait manuellement.

Problèmes pouvant être rencontrés lors du développement :

Lors du développement, vous pouvez rencontrer un scénario où une liste d'images est rendue en boucle . Selon le résumé ci-dessus, nous pouvons construire un tableau d'objets d'informations d'image, tels que :

<template>
 <p id="app">
 <!-- 1. 模版中 src 选项直接写相对路径 -->
 <img src="./assets/small.png" alt="图片相对路径测试">
 <!-- 2. 模版中 src 选项绑定相对路径字符串 -->
 <img :src="relative_img" alt="图片相对路径测试">
 <!-- 3. 模版中 src 选项绑定绝对路径字符串 -->
 <img :src="absolute_img" alt="图片绝对路径测试">
 <!-- 4. 模版中 src 选项绑定手动加载的图片资源 -->
 <img :src="smallImg" alt="图片测试">
 <!-- 5. 循环加载图片资源示例 -->
 <img
 v-for="image in imgList"
 :key="image.id"
 :src="image.src"
 :alt="image.title">
 </p>
</template>
<script>
import smallImg from &#39;./assets/small.png&#39;;
import bigImg from &#39;./assets/big.jpg&#39;;
export default {
 name: &#39;app&#39;,
 data() {
 return {
 smallImg: smallImg,
 relative_img: &#39;./assets/small.png&#39;,
 absolute_img: &#39;/static/img/small.png&#39;,
 imgList: [
 { id: 1, title: &#39;test1&#39;, src: require(&#39;./assets/logo1.png&#39;) },
 { id: 2, title: &#39;test2&#39;, src: require(&#39;./assets/logo2.png&#39;) },
 { id: 3, title: &#39;test3&#39;, src: require(&#39;./assets/logo3.png&#39;) },
 ],
 };
 },
}
</script>

afin de pouvoir afficher parfaitement les images que nous rendons en boucle.

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

Articles associés :

Utiliser la zone de saisie pour trouver des mots-clés dans jquery

Comment changer de skin dans Vue ?

Comment implémenter la méthode d'affectation spécifiée à l'aide de js et jQuery

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!