Wie setze ich den richtigen Quellpfad (GET localhost erhält 404 (Not Found))?

Ich habe ReactJS und Webpack eingerichtet. Ich setze den src-Pfad richtig, aber ich bekomme immer noch den folgenden Fehler, und ich kann nicht herausfinden, warum. Versuchte alle, wie ./, /, ../ usw. Das Bild heißt practiceImage.jpg und es ist in meinem Medienordner innerhalb des öffentlichen Ordners.Wie setze ich den richtigen Quellpfad (GET localhost erhält 404 (Not Found))?

Warum ist es nicht in der Lage es zu finden? Was sollte der richtige Weg sein?

In meinem home-page.js in Seiten Ordner:

<div> 
    <img src="../../public/media/practiceImage.jpg" 
     style={{width: '100%', height: '100%'}} 
    /> 
    </div>

Und doch macht nichts und ich bekomme das zerbrochene Bild auf dem Browser und Fehler GET http://localhost:8080/public/media/practiceImage.jpg 404 (Not Found)

Und ist mein Verzeichnisbaum:

enter image description here

Quelle

2016-09-07 Anonymous

Wenn die 'public' Stammordner ist, als die Verwendung in Bezug auf root:' '. – skobaljic

@skobaljic wie bestimmen Sie, ob etwas ein Stammordner ist, um zu sehen, ob relativ? –

Apps legen normalerweise einen Ordner als öffentlich fest, vergleichen Sie andere Dateipfade als Stylesheets in Ihrer Ordnerstruktur mit denen, die Sie auf dem Server sehen. Wenn Ihr CSS zum Beispiel in "public/css/style.css" steht, aber auf dem Server "css/style.css", dann ist Ihr öffentlicher Ordner "public" und betrachten Sie ihn als Server-Root. – skobaljic

Sie müssen Dateipfade umbrechen, die von Webpack in require() verarbeitet werden können Anrufe.

<img src={ require("../../public/media/practiceImage.jpg") } ...

Weiterführende Literatur: http://blog.andrewray.me/webpack-when-to-use-and-why/

Quelle

2016-09-07 20:43:37

immer noch kein Glück. Es wird weiterhin "Uncaught Error: Modul nicht gefunden" ../../ public/media/practiceImage.jpg' angezeigt. Was könnte das Problem sein? –

Der Dateipfad ist relativ zu der Javascript-Datei, in der Sie sich im Dateisystem befinden Stellen Sie sicher, dass diese Seite relativ zur aktuellen Datei vorhanden ist und dass Sie in Ihrer Webpack-Konfiguration auch einen Loader mit einem 'test:' Regex verwenden, der zu '.jpg' passt –

Sie können diesen Code auch nicht ausführen direkt im browser/node.Sie müssen den Quellcode in ein Bündel, das gültige Browser/Knoten Javascript mit Webpack ist transformieren.Lesen Sie den Artikel. –

Wie setze ich den richtigen Quellpfad (GET localhost erhält 404 (Not Found))?

Antwort

Verwandte Themen