Lokale statische Bildpfade in Vue implementieren (ausführliches Tutorial)

In diesem Artikel erfahren Sie, wie Sie lokale statische Bildpfade in Vue schreiben und wie Sie Bildpfade in Vue.js referenzieren. Freunde, die es benötigen, können darauf verweisen

Schreiben Sie hier die Bildbeschreibung

Anforderung: Wie kann index.vue in Komponenten Bilder aus Assets herausnehmen?

1. Schreiben Sie den Pfad direkt in das img-Tag:

<img src="../assets/a1.png" class="" width="100%"/>

2. Verwenden Sie ein Array, um die Ausgabe zu speichern und wiederzuverwenden:

<el-carousel-item v-for="item in carouselData" :key="item.id">
    <img :src="item.url" class="carouselImg"/>
    <span class="carouselSpan">{{ item.title }}</span>
</el-carousel-item>
data: () => ({
   carouselData:[
   {url:require(&#39;../assets/a1.png&#39;),title:&#39;你看我叼吗1&#39;,id:1},
   {url:require(&#39;../assets/a3.png&#39;),title:&#39;你看我叼吗2&#39;,id:2},
   {url:require(&#39;../assets/a4.png&#39;),title:&#39;你看我叼吗3&#39;,id:3}
   ]
  }),

Der Effekt ist wie folgt:

index Der vollständige Code in .vue ist dieser:

<script>
  import footer1 from &#39;../components/public/footer&#39;
  export default {
  data: () => ({
   carouselData:[
   {url:require(&#39;../assets/a1.png&#39;),title:&#39;你看我叼吗1&#39;,id:1},
   {url:require(&#39;../assets/a3.png&#39;),title:&#39;你看我叼吗2&#39;,id:2},
   {url:require(&#39;../assets/a4.png&#39;),title:&#39;你看我叼吗3&#39;,id:3}
   ]
  }),
  components:{
      footer1
    },
 }
</script>

PS: Werfen wir einen Blick auf den Bildreferenzpfad in Vue.js

Wenn wir im Vue.js-Projekt auf Bilder verweisen, gibt es die folgenden Situationen bezüglich des Bildpfads:

Verwenden Sie ein

Wir Definieren Sie den Bildpfad in den Daten

imgUrl:'../assets/logo.png'

Dann ist

<<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="
{{imgUrl}}">

in der Vorlage der falsche Weg, ihn zu schreiben. Wir sollten v-bind zum Binden verwenden das srcs-Attribut des Bildes

:src="imgUrl">

oder

<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img src="../assets/logo.png">

Diese Methode bezieht sich auf den Pfad gemäß der normalen HTML-Syntax und kann beim Platzieren per Webpack gepackt werden die Vorlage.

Verwenden Sie zwei

Wenn wir den Bildpfad in den js-Code schreiben müssen, wenn wir

imgUrl:'../assets/logo.png'

Zu diesem Zeitpunkt behandelt Webpack es nur als Zeichenfolge und kann die Bildadresse nicht finden. Zu diesem Zeitpunkt können wir Import verwenden, um den Bildpfad einzuführen:

:src="avatar" />
import avatar from '@/assets/logo.png'

Definiert in Daten

avatar: avatar

Szenario 3

Wir können das Bild auch im äußeren statischen Ordner ablegen und es dann in den Daten definieren:

imgUrl ： '../../static/logo.png'
:src="imgUrl" />

oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So ändern Sie den Wert eines bestimmten Elements in den von Vue angeforderten Daten

Detaillierte Erläuterung der Verwendung von Vue -cli-Gerüst Initialisiert die Projektstruktur unter dem Vue-Projekt

Vue und vue-i18n werden kombiniert, um die mehrsprachige Umschaltmethode für Hintergrunddaten zu implementieren

Das obige ist der detaillierte Inhalt vonLokale statische Bildpfade in Vue implementieren (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!