Lösung für das Problem, dass das Vue-Seitenbild nicht angezeigt wird

Als ich eine neue Version der Konfigurationsschnittstelle erstellte, verwendete ich zur Implementierung das Vue-Framework. Beim Konfigurieren des Seitenbilds stellte ich fest, dass es ein Bild gab, dessen Pfad korrekt war, das Bild jedoch nicht angezeigt wurde.

Phänomen:

Die Ressourcen der Netzwerkseite melden keinen Fehler und der Statuscode ist immer noch 200. In der Vorschau ist nichts zu sehen. Nach der Eingabe habe ich festgestellt, dass bei jedem eingegebenen Wort 200 angezeigt wird.

Lösung:

Konfigurieren Sie den Pfad statischer Ressourcen in Webpack

1. Suchen Sie vue.config.js

2. Fügen Sie einen Schlüssel im devServer unter module.exports hinzu

contentBase:Pfad.join(_dirname,'src')

Dies bedeutet, dass der Webpack-Dev-Server den aktuellen Pfad als angeforderten Ressourcenpfad verwendet.

Über contentBase, Referenzartikel

https://www.jb51.net/article/222324.htm

Statische Ressourcen:

Methode 1: Direkt den Pfad eingeben

<img class="sys_logo" src="./assets/images/top-logo.png"/>

Methode 2: Verwenden von require

importiere Logo-URL aus „./top-logo.png“
const Bilder = {
    logoUrl
}
Standardbilder exportieren

Methode 3: Modularisierung

importiere Logo-URL aus „./top-logo.png“
const Bilder = {
    logoUrl
}
Standardbilder exportieren

verwenden:

javascript - Argumente:

Bilder aus „./assets/images“ importieren

<img class="sys_logo" :src="Bilder.logoUrl" />

Dies ist das Ende dieses Artikels über die Lösung für das Problem, dass Bilder auf Vue-Seiten nicht angezeigt werden. Weitere Informationen zum Problem, dass Bilder auf Vue-Seiten nicht angezeigt werden, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!