So fügen Sie img-Bilder in Vue-Seiten ein

So fügen Sie img-Bilder in Vue-Seiten ein

Wenn wir HTML lernen, führt das Bild-Tag <img> Bilder ein

<img src="../assets/images/avatar.png" width="100%">

Dies hat jedoch zwei Nachteile:

  • Da für den Import der absolute Pfad verwendet wird, muss der Pfad in src geändert werden, wenn das Verzeichnis des folgenden Bildes verschoben wird
  • Wenn dieses Bild an mehreren Stellen auf derselben Seite verwendet wird, muss es mehrmals importiert werden und das Bildverzeichnis wurde verschoben, sodass der Quellpfad an vielen Stellen geändert werden muss.

was zu tun? Dynamischen Pfadimport verwenden und erfordern

Lassen Sie uns zunächst über diese beiden Brüder sprechen. Vor ES6 hatte JS keine eigene Modulsyntax. Um dieses Problem zu lösen, wurde require.js erstellt. Nach der Veröffentlichung von ES6 führte JS das Konzept des Imports ein.

Importieren mit Import

Nach dem Import müssen Sie es in den Daten registrieren, sonst wird es nicht angezeigt

<Skript>
importiere lf1 aus '@/assets/images/cityOfVitality/lf1.png'
importiere lf2 aus '@/assets/images/cityOfVitality/lf2.png'
importiere lf3 aus '@/assets/images/cityOfVitality/lf3.png'
importiere lf4 aus '@/assets/images/cityOfVitality/lf4.png'
importiere lf5 aus '@/assets/images/cityOfVitality/lf5.png'
importiere lf6 aus '@/assets/images/cityOfVitality/lf6.png'
importiere lf7 aus '@/assets/images/cityOfVitality/lf7.png'
importiere top1 aus '@/assets/images/cityOfVitality/icon_top1.png'
Mixins aus „./mixins“ importieren
Standard exportieren {
  Name: "LinkesStück",
  Mixins: [Mixins],
  Daten () {
    zurückkehren {
      lf1,
      lf2,
      lf3,
      lf4,
      lf5,
      lf6,
      lf7,
      nach oben1
    }
  }
}
</Skript>

Importieren mit require

<Skript>
importiere top1 aus '@/assets/images/cityOfVitality/icon_top1.png'
Mixins aus „./mixins“ importieren
Standard exportieren {
  Name: 'RightPiecr',
  Mixins: [Mixins],
  Daten () {
    zurückkehren {
      rt1: erfordern('@/assets/images/cityOfVitality/rt1.png'),
      rt2: erfordern('@/assets/images/cityOfVitality/rt2.png'),
      rt3: erfordern('@/assets/images/cityOfVitality/rt3.png'),
      rt4: erfordern('@/assets/images/cityOfVitality/rt4.png'),
      rt5: erfordern('@/assets/images/cityOfVitality/rt5.png'),
      rt6: erfordern('@/assets/images/cityOfVitality/rt6.png'),
      nach oben1
    }
  }
}
</Skript>

Dies ist das Ende dieses Artikels zum Einfügen von img-Bildern in Vue-Seiten. Weitere relevante Inhalte zum Einfügen von img-Bildern in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung verschiedener Möglichkeiten zum Einführen von Bildpfaden in Vue.js
  • Die drei Codebeispiele für den Bildimport von Vue
  • So integrieren Sie Bilder eleganter in Vue-Seiten

<<:  HTML-Tabellen-Markup-Tutorial (39): Das helle Rahmenfarbattribut der Kopfzeile BORDERCOLORLIGHT

>>:  Automatischer Commit-Vorgang für MySQL-Transaktionen

Artikel empfehlen

Vollständige Anleitung zur Verwendung von Iframes ohne Rahmen oder Ränder (Zusammenfassung der praktischen Erfahrungen)

<iframe src=”URL Ihrer Seite” width=”100″ heigh...

So deaktivieren Sie die Eslint-Erkennung in Vue (mehrere Methoden)

Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...

Wie verstecke ich einen bestimmten Text in HTML?

Code zum Ausblenden von Text, Ausblenden eines bes...

Beispiel für den Aufbau eines Redis-Sentinel-Clusters basierend auf Docker

1. Übersicht Redis Cluster ermöglicht hohe Verfüg...

So führen Sie SQL-Anweisungen automatisch aus, wenn MySQL in Docker gestartet wird

Wenn wir mit Docker einen MySQL-Container erstell...

Tutorial zur Installation von MYSQL5.7 aus dem OEL7.6-Quellcode

Laden Sie zunächst das Installationspaket von der...

Asynchrone Programmierung in Javascript: Verstehen Sie Promise wirklich?

Inhaltsverzeichnis Vorwort Grundlegende Verwendun...

Implementierung der K8S-Bereitstellung eines Docker-Containers

Umgebung: (Docker, K8s-Cluster), fahren Sie mit d...

So ändern Sie das Root-Passwort von MySQL in Docker

Der erste Schritt besteht darin, einen MySQL-Cont...

Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?

Das Vergessen des Passworts ist ein Ärgernis. Was...

Lösen Sie das Problem, dass Docker Elasticsearch7.x startet und einen Fehler meldet

Verwenden des Docker-Befehls „run“ docker run -d ...

Details zum JavaScript-Abschluss

Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...

Einführung in die Installationsmethode in Vue

Inhaltsverzeichnis 1. Weltweit registrierte Kompo...

Ohne zu viel Code können Sie Hyperlinks verwenden, um einfache und schöne benutzerdefinierte Kontrollkästchen zu implementieren

Heute ist mir plötzlich aufgefallen, dass die Stil...

Detaillierte Erklärung der Zeichensätze und Validierungsregeln in MySQL

1Mehrere gängige Zeichensätze Zu den gängigsten Z...