javascript - Ich möchte Sie fragen, wenn Webpack Bilder packt, können diese nicht auf der Seite angezeigt werden. Haben Sie Fragen zum Stammverzeichnis der Website?

Question

Bitte gib mir einen Rat, Bruder. Lade zuerst die Bilder hoch, zuerst das Dateiverzeichnis:

Als nächstes finden Sie die Konfigurationsinformationen des Bildteils des Webpacks:

Das aufgetretene spezifische Problem ist: Das Bild kann nicht angezeigt werden und die Browserkonsole meldet einen Fehler, der besagt, dass das Bild nicht gefunden werden kann. Ich habe im Konsolencode gesehen, dass der Pfad des Bildes lautet: http://localhost:3000/images/...;
Da die vor dem Site-Stammverzeichnis festgelegte contentBase /views ist, wird auch index.html darin platziert Zu diesem Zeitpunkt setze ich contentBase auf „/“. Der Effekt, den ich erzielen möchte, besteht darin, das Stammverzeichnis auf die gleiche Ebene wie die Webpack-Konfigurationsdatei zu setzen und das Bild zu platzieren Als nächstes habe ich den Bildpfad in ./images/logo.png geändert, aber als ich die Browserseite geöffnet habe, konnte ich ihn nicht finden.
Zu diesem Zeitpunkt habe ich die Inhaltsbasis und den Index blockiert .html war immer noch draußen, aber ich konnte es immer noch nicht finden. . .
Wir sind also auf einen Widerspruch gestoßen:
Wenn sich die Ansichten und Bilder des Stammverzeichnisses auf derselben Ebene befinden, werden die Bilder nicht angezeigt (meine persönliche Vermutung ist, dass die Bilder nicht im Stammverzeichnis gepackt sind), sondern beim Anpassen der contentBase , ich möchte die Bilder im Stammverzeichnis ablegen, habe sie aber nicht bekommen und weiß nicht, wie ich sie bekommen soll?

Answer 1

//引入图片的姿势不正确，不可以直接这样 ‘../images/...‘;
//要么 
import logo from ‘../images/logo.png’;
<img src={logo} alt=""/>

要么 
<img src={require('../images/logo.png')} alt=""/>

//以上两种随便选

Answer 2

看看你的publicPath的设置了，一般都设置为根目录‘／’