Welche Methoden gibt es für Referenzpfade in Vue-Einzeldateien?

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Referenzpfadverarbeitung in einer einzelnen Vue-Datei ein. Der Artikel stellt sie ausführlich anhand von Beispielcode vor. Es hat einen gewissen Referenz-Lernwert, damit jeder vue.js lernen oder verwenden kann. Freunde, die es brauchen. Lasst uns gemeinsam mit mir lernen.

Vorwort

Vues Einzeldateikomponente wird sehr häufig bei der Verwendung von Vue und im Entwicklungsprozess von Vue-Einzeldateien in Einzeldateien verwendet Datei Die Vorlage kann die Verarbeitung von Dateipfaden wie a1f02c36ba31691bcfe87b2722de723b, die Verarbeitung von Hintergrundstilen usw. umfassen. Im Folgenden wird die SRC-Verarbeitung von a1f02c36ba31691bcfe87b2722de723b in verschiedenen Szenarien erläutert und erläutert, wie statische Ressourcen (z. B. Bildverarbeitung) während des Entwicklungsprozesses mithilfe von vue+webpack korrekt referenziert werden.

Wie unten gezeigt, sind Beispiele für die Referenzierung von Bildpfaden in verschiedenen Szenarien in der einzelnen Dateikomponente unten angegeben (statische Bildressourcen werden in src/assets/small.png gespeichert):

<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>

Die Die obigen Codeausschnitte zeigen, wie das img-Tag verwendet wird, um in vier Szenarien auf Bildressourcen in der Vue-Einzeldateikomponente zu verweisen. Natürlich können nicht alle dieser vier Methoden Bildressourcen korrekt laden.

Fall 1:

ist direkt an das src-Attribut mit einem relativen Pfad in der Vorlage gebunden. In diesem Fall kann die Bildressource korrekt geladen werden. Wir wissen, dass der Vue-Loader bei der Webpack-Verarbeitung einzelner Vue-Dateikomponenten hauptsächlich für die Verarbeitung von *.vue-Dateien verantwortlich ist. Im Abschnitt zur Vue-Loader-Ressourcenpfadverarbeitung in der Vue-Loader-Dokumentation wird erläutert, wie Vue-Loader Ressourcenpfade in Vorlagen verarbeitet. Zum Beispiel: f8d9cde947de1719581060b617c87f21, Hintergrund: url(), @import usw. werden als Modulabhängigkeiten verarbeitet. Das heißt, in diesen Fällen verarbeitet der Vue-Loader automatisch die Ressourcenreferenz des Pfads und die endgültige Pfadersetzung. Die Verarbeitung von img ist wie folgt:

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

wird vom Vue-Template-Compiler kompiliert in:

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

Dies erklärt auch, warum der Bildinhalt in Fall 1 korrekt angezeigt werden kann, da vue- Loader Hilft uns automatisch bei der Ressourceneinführung und Pfadersetzung.

Fall 2:

Die relative Pfad-String-Variable ist an das src-Attribut in der Vorlage gebunden. In diesem Fall kann das Bild nicht sein normal angezeigt. Der Grund dafür ist, dass der Vue-Loader nicht erkennen kann, ob es sich bei der Variablen um eine Pfadzeichenfolge handelt. Daher besteht kein Problem, dass der Vue-Loader automatisch Ressourcen einführt und den Pfad ersetzt. In diesem Fall ist die kompilierte Vorlage immer noch eine relative Pfadzeichenfolge. Offensichtlich kann das Bild ohne die entsprechende Ressourceneinführung und den falschen Pfad nicht korrekt angezeigt werden.

Situation 3:

Viele Leute versuchen, die Einführung absoluter Pfadvariablen zu verwenden, wenn der relative Pfad nicht korrekt angezeigt werden kann In diesem Fall kann das Bild nicht angezeigt werden, da die Bildressource nicht manuell eingegeben wurde. Hinweis: Viele Schüler versuchen, Ressourcen manuell einzuführen und src dann entsprechend der absoluten Pfadvariablen zu binden. Sie stellen fest, dass es tatsächlich referenzierte Ressourcen unter dem Pfad dist/static/img/ gibt, aber der URL-Loader in der vue-cli-Webpack-Vorlage Funktioniert nicht für Dateien vom Typ IMG. Beim Laden wird die Verarbeitung von Hashwerten hinzugefügt. Selbst wenn wir in diesem Fall eine absolute Pfadvariable binden, können wir das Bild immer noch nicht korrekt referenzieren, da es nicht korrekt mit der Bilddatei übereinstimmen kann, zu der der Hashwert hinzugefügt wird. In diesem Fall, in dem Bilder manuell eingefügt werden müssen, wird die Vorgehensweise zu Situation 4 empfohlen.

Fall 4:

Das src-Attribut in der Vorlage ist direkt an die manuell eingegebene Bildressource gebunden korrekt angezeigt werden. Diese Methode wird auch vom Vue-Loader verwendet, wenn Ressourcen verarbeitet werden, die automatisch importierten Pfaden entsprechen.

Zusammenfassend lässt sich sagen, dass in der Vue-Einzeldateikomponente der Schlüssel zur korrekten Anzeige eines Bildes wie folgt lautet:

• Wenn die Bildressource erforderlich oder importiert ist, wird dies der Fall sein Wird vom URL-Loader des Webpacks verwendet und in das endgültige Verzeichnis verarbeitet.

• Das img src-Attribut muss durch den endgültigen Bildressourcenpfad ersetzt werden

Die beiden oben genannten Punkte sind unverzichtbar. Der Grund dafür, dass das Bild im ersten und vierten Fall korrekt angezeigt werden kann, liegt darin, dass die beiden oben genannten Bedingungen in beiden Fällen erfüllt sind. Im ersten Fall erledigt der Vue-Loader dies automatisch für uns, und im vierten Fall erledigen wir es manuell.

Probleme, die während der Entwicklung auftreten können:

Während der Entwicklung kann es zu einem Szenario kommen, in dem eine Liste von Bildern in einer Schleife gerendert wird . Gemäß der obigen Zusammenfassung können wir ein Array von Bildinformationsobjekten erstellen, wie zum Beispiel:

<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>

, damit wir die von uns gerenderten Bilder perfekt in einer Schleife anzeigen können.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwenden des Eingabefelds zum Suchen von Schlüsselwörtern in jquery

Wie ändert man den Skin in Vue?

So implementieren Sie die angegebene Zuweisungsmethode mit js und jQuery

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es für Referenzpfade in Vue-Einzeldateien?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!