Was soll ich tun, wenn Vue den Fehler meldet, dass das Bild nicht gefunden werden kann?

Die Lösung für die Vue-Fehlermeldung, dass das Bild nicht gefunden werden kann: 1. Ändern Sie die Konfigurationsdatei und ändern Sie den absoluten Pfad in einen relativen Pfad. 2. Laden Sie das Bild als Modul und legen Sie das Bild im statischen Verzeichnis ab. Fügen Sie imageUrls in die Antwort ein. Analysieren Sie einfach die Referenz in der Vue-Datei.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3, Dell G3-Computer.

Was soll ich tun, wenn vue einen Fehler meldet und das Bild nicht finden kann?

Das Problem und die Lösung, wenn Bilder in Vue nicht geladen werden

Bei der Verwendung von Vue zum Entwickeln von Projekten tritt häufig das Problem auf: Bilder können nicht geladen werden. Im Folgenden habe ich die Situationen und Lösungen für mehrere Situationen zusammengefasst, in denen Bilder nicht geladen werden können.

1. Öffnen Sie nach Abschluss der Projektverpackung den gesamten Rohling

1. Pfadproblem

Ursache

Im Vue + Webpack-Projekt sind die Referenzpfade von CSS und JS nach der Projektverpackung absolute Pfade und werden es auch sein Nach der Projektbereitstellung hinzugefügt. Die Verwendung von „statisch“ als Stammverzeichnis führt zu einem Fehler im Dateireferenzpfad.

Lösung

Ändern Sie den absoluten Pfad in einen relativen Pfad, indem Sie die Konfigurationsdatei ändern.

Die spezifischen Vorgänge lauten wie folgt:

1.vue-cli vor Version 3.0

Konfigurieren Sie den vom Bulid-Modul exportierten Pfad in index.js unter config. Da der Inhalt in index.html über Skript-Tags eingeführt wird und Ihr Pfad falsch ist, ist er beim Öffnen definitiv leer. Schauen wir uns zunächst den Standardpfad an.

module.exports = {
 build: {
 env: require('./prod.env'),
 index: path.resolve(__dirname, '../dist/index.html'),
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 productionSourceMap: true,

assetsPublicPath ist standardmäßig „/“, was das Stammverzeichnis ist. Unsere index.html und static befinden sich im selben Verzeichnis. Ändern Sie es also in './ '

2.vue-cli Nach Version 3.0

konfigurieren Sie die Datei vue.config.js

module.exports = {
  // baseUrl:'./', // vue-cli3.3以下版本使用
  publicPath:'./' // vue-cli3.3+新版本使用

2. Nachdem der Verlaufsmodus von vue-router gepackt wurde, wird die Schnittstelle ist leer

src Der Standardmodus in der Routing-Konfiguration von router/index.js ist Hash. Wenn Sie ihn in den Verlaufsmodus ändern, ist er beim Öffnen leer. Ändern Sie es also in Hash oder löschen Sie die Moduskonfiguration direkt und machen Sie sie zur Standardeinstellung.

Wenn Sie den Verlaufsmodus verwenden müssen, müssen Sie auf der Serverseite eine Kandidatenressource hinzufügen, die alle Situationen abdeckt: Wenn die URL mit keiner statischen Ressource übereinstimmen kann, sollten Sie eine index.html zurückgeben, also die Seite, von der Ihre App abhängt An.

// mode: 'history' 
// 默认hash

2. Das Bild im Assets-Verzeichnis kann nicht geladen werden

Der Unterschied zwischen den Assets und statischen Dateien von vue-cli

• assets: wird während des Projekts vom Webpack blockiert Die Verarbeitung des Kompilierungsprozesses wird in Modulabhängigkeiten aufgelöst und unterstützt nur die Form relativer Pfade, z. B. a6f88eaad3fd08d2d0724bf21b45e7c8 „.png“ ist ein relativer Ressourcenpfad, den das Webpack in Modulabhängigkeiten auflöst. assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如4cb6d3197874de10ee8e0831ccea2a9e和background:url(./logo.png),‘./logo.png‘是相对资源路径，将有webpack解析为模块依赖。
• static
statisch: Dateien in diesem Verzeichnis werden nicht von Webpack verarbeitet. Dies bedeutet einfach, dass der Ort, an dem Dateien von Drittanbietern gespeichert sind, nicht von Webpack analysiert wird. Es wird direkt in das endgültige Verpackungsverzeichnis kopiert (Standard ist dist/static). Auf diese Dateien muss mit absoluten Pfaden verwiesen werden, die über die Links build.assetsPublic und build.assertsSubDirectory in der Datei config.js bestimmt werden. Jede in static/ abgelegte Datei muss als absoluter Pfad referenziert werden: /static[Dateiname].

Gemäß den Eigenschaften von Webpack ändern sich statische Dateien im Allgemeinen nicht. Die dritte Datei behauptet, dass sich Dateien ändern können.

Der Grund: Im Webpack werden Bilder als Module verwendet, da sie dynamisch geladen werden , kann der URL-Loader die Bildadresse nicht analysieren und der Pfad wird nach npm run dev oder npm run build nicht verarbeitet [der vom Webpack analysierte Pfad wird als /static/img/[Dateiname] analysiert. png, die vollständige Adresse lautet localhost:8080/static/img/[filename].png】

Lösung

1. Laden Sie das Bild als Modul

Zum Beispiel Bilder:[{src:require('. / 1.png')},{src:require('./2.png')}], damit das Webpack es analysieren kann.

2. Platzieren Sie die Bilder im statischen Verzeichnis

, müssen aber als absoluter Pfad geschrieben werden, z. B. Bilder: [{src:“/static/1.png“},{src:“/static/2. png“}] Auf diese Weise wird das Bild auch angezeigt. Natürlich können Sie die Schreiblänge des Pfads auch verkürzen, indem Sie ihn in webpack.base.config.js definieren.

So vereinfachen Sie das lokale Laden von Bildern

1. Erstellen Sie einen neuen imageUrls-Ordner im Responsive-Format vue-Datei , analysieren Sie einfach die Referenz

{
  'imageUrls': [
    {
      'image1': '/static/image/image1.png'
    },
    {
      'image2': '/static/image/image2.png'
    }
  ]
}

Empfohlenes Lernen: „

vue.js Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn Vue den Fehler meldet, dass das Bild nicht gefunden werden kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!