Vues lokaler statischer Bildpfad

Dieses Mal werde ich Ihnen den lokalen statischen Bildpfad von vue vorstellen. Was sind die Vorsichtsmaßnahmen , wenn Sie den lokalen statischen Bildpfad von vue verwenden?

Hier die Bildbeschreibung schreiben

Anforderung: Wie kann die index.vue in Komponenten die Bilder in 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('../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 die Bildreferenz Pfad in Vue.js

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

Verwenden Sie einen

Wir definieren den Bildpfad in den Daten

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

und dann in der Vorlage

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

Das ist falsch So schreiben wir es. Wir sollten v-bind verwenden. Binden Sie 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 entsprechend 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, 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

Fall 3

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

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

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:

Wie jQuery+koa2 die Ajax-Anfrage implementiert

Wie man mit der Fehlausrichtung des Select Drop von iview umgeht -Down-Box-Optionen

Das obige ist der detaillierte Inhalt vonVues lokaler statischer Bildpfad. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!