So verweisen Sie auf lokale statische Bilder in Vue

Dieses Mal zeige ich Ihnen, wie Sie lokale statische Bilder in Vue referenzieren. Was sind die Vorsichtsmaßnahmen für die Referenzierung lokaler statischer Bilder in Vue?

Hier Bildbeschreibung schreiben

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 Arrays, 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('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',id:3}
   ]
  }),

Der Effekt ist wie folgt:

Der vollständige Code in index.vue lautet:

<script>
  import footer1 from '../components/public/footer'
  export default {
  data: () => ({
   carouselData:[
   {url:require('../assets/a1.png'),title:'你看我叼吗1',id:1},
   {url:require('../assets/a3.png'),title:'你看我叼吗2',id:2},
   {url:require('../assets/a4.png'),title:'你看我叼吗3',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 eins

Wir definieren den Bildpfad in Daten

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

Dann in der Vorlage

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

Das ist die falsche Schreibweise. Wir sollten v-bind verwenden, um das srcs-Attribut des Bildes zu binden

: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 in der Vorlage per Webpack gepackt werden.

Verwenden Sie zwei

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

in die Daten 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'

Definieren Sie

in Daten avatar: avatar

Szenario 3

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

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

So verweisen wir auf den Bildpfad in Vue.js.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Was soll ich tun, wenn Vue nach dem Packen des Projekts aktualisiert wird und 404 anzeigt?

vue verwendet die xe-utils-Funktion Detaillierte Erklärung von Kus Schritten

Das obige ist der detaillierte Inhalt vonSo verweisen Sie auf lokale statische Bilder in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!