Ich habe ein Projekt unter Verwendung dieses Links entwickelt: Ссылка Ich habe Maven verwendet, um das obige Projekt zu entwickeln.
Ich habe zwei HTML-Dateien darunter. abc.html und xyz.html. Um Bilder in die HTML-Seite einzufügen, habe ich die URL wie folgt verwendet:
%Vor%Aber ich möchte stattdessen eine Bilddatei auf meinem Server verwenden. Ich habe versucht, die Datei in das gleiche Verzeichnis der HTML-Datei zu platzieren, aber es funktioniert nicht. Ich habe sogar versucht, den vollen Pfad zu geben, aber nutzlos. Dies ist ein Ubuntu-Betriebssystem. Bitte helfen Sie mir hier draußen. Gibt es einen Ort, an dem ich den Basispfad konfigurieren kann oder grundsätzlich ein Bild aus meinem lokalen Ordner einfügen kann.
Ich möchte, dass Sie in die Dokumentation von Thymeleafs Standard-URL-Syntax und speziell den Kontext-Verwandten schauen und Server-relative URL-Muster.
Kontextbezogene URL:
Wenn Sie Ressourcen in Ihrer Webanwendung verknüpfen möchten, sollten Sie sie verwenden Kontext relative URLs. Dies sind URLs, die eigentlich sein sollen relativ zum Stammverzeichnis der Webanwendung, sobald es auf dem Server installiert wurde Server. Zum Beispiel, wenn wir eine Datei myapp.war auf einem Tomcat bereitstellen Server, unsere Anwendung wird wahrscheinlich als erreichbar sein Ссылка , und myapp ist der Kontextname.
Als JB Nizet wird folgendes für Sie funktionieren, da ich thymeleaf persönlich in einem Webapp-Projekt verwendet habe,
%Vor%und die test.png sollten sich unter Ihrem Projektstamm im Ordner "webapp" befinden. Etwas, das ungefähr wie navigiert wurde,
%Vor%Beispiel:
%Vor%Ausgabe als:
%Vor% Wenn Sie in Ihrem Browser auf http://localhost:8080/myapp/resources/images/Picture.png klicken, sollten Sie auf das Bild zugreifen können, damit die obige Syntax funktioniert. Und Ihr Ressourcenordner wird wahrscheinlich unter dem Webapp-Ordner Ihrer Anwendung sein.
Server-relative URL:
Serverbezogene URLs sind mit Ausnahme von kontextbezogenen URLs sehr ähnlich Sie gehen nicht davon aus, dass Ihre URL mit einer Ressource verknüpft werden soll innerhalb des Anwendungskontextes und ermöglicht Ihnen somit, eine Verknüpfung herzustellen ein anderer Kontext auf demselben Server
Syntax:
%Vor%Ausgabe als:
%Vor% Das obige Bild wird von einer Anwendung geladen, die sich von Ihrem Kontext unterscheidet, und wenn eine Anwendung namens billing-app auf Ihrem Server vorhanden ist.
Quelle: Thymeleaf-Dokumentation
Sie müssen verstehen, wie HTTP funktioniert. Wenn der Browser eine Seite unter URL lädt
%Vor%und die HTML-Seite enthält
%Vor% Der Browser sendet eine zweite HTTP-Anfrage an den Server, um das Bild zu laden. Die URL des Bildes ist http://some.host/myWebApp/foo/images/test.png , da der Pfad relativ ist. Beachten Sie, dass der absolute Pfad aus dem aktuellen "Verzeichnis" der Seite besteht, das mit dem relativen Pfad des Bildes verknüpft ist. Der Pfad der serverseitigen JSP- oder Thymeleaf-Vorlage ist hier völlig irrelevant. Was zählt, ist die URL der Seite, wie sie in der Adressleiste des Browsers angezeigt wird. Diese URL ist in einer typischen Spring MVC-Anwendung die URL des Controllers, an den die ursprüngliche Anforderung gesendet wurde.
Wenn der Pfad des Bildes absolut ist:
%Vor% Dann sendet der Browser eine zweite Anfrage an die URL http://some.host/myWebApp/images/test.png . Der Browser startet vom Stamm des Webservers und verkettet den absoluten Pfad.
Um in der Lage zu sein, ein Bild zu referenzieren, egal wie die URL der Seite ist, ist ein absoluter Pfad daher vorzuziehen und einfacher zu verwenden.
Im obigen Beispiel ist /myWebApp der Kontextpfad der Anwendung, den Sie normalerweise nicht im Pfad fest codieren möchten, da er sich möglicherweise ändert. Glücklicherweise versteht thymeleaf dies gemäß der thymeleaf Dokumentation und bietet eine Syntax für kontextbezogene Pfade, die transformiert also Pfade wie /images/test.png in /myWebApp/images/test.png . Dein Bild sollte also wie folgt aussehen:
(Ich habe noch nie Thymelöffel verwendet, aber das entnehme ich der Dokumentation).
Und das test.png image sollte sich also in einem Ordner images befinden, der sich unter der Wurzel der Webapp befindet.