Insertion d'une image d'un répertoire local dans le cadre d'une source thymeleaf (avec maven)
J'ai développé un projet en utilisant ce lien: https://spring.io/guides/gs/serving-web-content/ / J'ai utilisé maven pour développer le projet ci-dessus.
J'ai deux fichiers HTML sous cela. abc.html et xyz.html. Pour insérer des images dans la page html, j'ai utilisé l'URL comme ceci:
<img src="https://example.com/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">
Mais je veux plutôt utiliser un fichier image situé sur mon serveur. J'ai essayé de placer le fichier dans le même répertoire que le fichier HTML, mais cela ne fonctionne pas. J'ai même essayé de donner un chemin complet mais inutile. Ceci est un système d'exploitation Ubuntu. S'il vous plaît aidez-moi ici. Y a-t-il un endroit où je peux configurer le chemin d'accès de base ou, fondamentalement, comment placer une image de mon dossier local.
Je souhaite que vous consultiez la documentation de Thymeleaf sur Syntaxe standard des URL et plus particulièrement sur les modèles d’URL relatifs au contexte et relatifs au serveur.
URL relative au contexte:
Si vous souhaitez lier des ressources dans votre application Web, vous devez utiliser URL relatives au contexte. Ce sont des URL qui sont supposés être par rapport à la racine de l'application Web une fois qu'elle est installée sur le serveur. Par exemple, si nous déployons un fichier myapp.war dans un Tomcat serveur, notre application sera probablement accessible en tant que http: // localhost: 8080/myapp , et myapp sera le nom du contexte.
En tant que JB Nizet, ce qui suit fonctionnera pour vous car j’ai personnellement utilisé thymeleaf dans un projet d’application Web
<img th:src="@{/images/test.png}"/>
et le fichier test.png doit se trouver sous la racine de votre projet dans le dossier webapp. Quelque chose a traversé à peu près comme,
Myapp->webapp->images->test.png
Par exemple:
<img th:src="@{/resources/images/Picture.png}" />
Sortie sous forme de:
<img src="/resources/image/Picture.png" />
Lorsque vous appuyez sur http://localhost:8080/myapp/resources/images/Picture.png dans votre navigateur, vous devriez pouvoir accéder à l'image pour que la syntaxe ci-dessus fonctionne. Et votre dossier de ressources sera probablement sous le dossier webapp de votre application.
URL relative au serveur:
Les URL relatives au serveur sont très similaires aux URL relatives au contexte, à l'exception de ils ne supposent pas que vous souhaitiez que votre URL soit un lien vers une ressource dans le contexte de votre application, et vous permettent donc de créer un lien vers un contexte différent sur le même serveur
Syntaxe:
<img th:src="@{~/billing-app/images/Invoice.png}">
Sortie en tant que:
<a href="/billing-app/showDetails.htm">
L'image ci-dessus sera chargée depuis une application différente de votre contexte et si une application nommée billing-app est présente sur votre serveur.
Provenant de: documentation Thymeleaf
Vous devez comprendre comment fonctionne HTTP. Lorsque le navigateur charge une page à l'URL
http://some.Host/myWebApp/foo/bar.html
et la page HTML contient
<img src="images/test.png"/>
le navigateur enverra une deuxième requête HTTP au serveur pour charger l'image. L'URL de l'image, puisque le chemin est relatif, sera http://some.Host/myWebApp/foo/images/test.png. Notez que le chemin absolu est composé du "répertoire" actuel de la page, concaténé avec le chemin relatif de l'image. Le chemin du modèle JSP ou thymeleaf côté serveur n’est absolument pas pertinent ici. Ce qui compte, c'est l'URL de la page, telle qu'elle apparaît dans la barre d'adresse du navigateur. Dans une application Spring MVC typique, cette URL est l’URL du contrôleur où la demande initiale a été envoyée.
Si le chemin de l'image est absolu:
<img src="/myWebApp/images/test.png"/>
alors le navigateur enverra une deuxième demande à l'URL http://some.Host/myWebApp/images/test.png. Le navigateur commence à la racine du serveur Web et concatène le chemin absolu.
Pour pouvoir référencer une image, quelle que soit l'URL de la page, un chemin absolu est donc préférable et plus facile à utiliser.
Dans l'exemple ci-dessus, /myWebApp est le chemin de contexte de l'application, que vous ne voulez généralement pas coder en dur dans le chemin, car il pourrait changer. Heureusement, selon la documentation thymeleaf , thymeleaf comprend cela et fournit une syntaxe pour les chemins relatifs au contexte, qui transforme ainsi les chemins tels que /images/test.png en /myWebApp/images/test.png. Donc, votre image devrait ressembler à
<img th:src="@{/images/test.png}"/>
(Je n'ai jamais utilisé thymeleaf, mais c'est ce que je déduis de la documentation).
Et l’image test.png devrait donc se trouver dans un dossier images situé sous la racine de la webapp.