Inserimento di un'immagine dalla directory locale nel framework spring thymeleaf (con Maven)

Question

Ho sviluppato un progetto utilizzando questo collegamento: https://spring.io/guides/gs/serving-web-content/ Ho usato Maven per sviluppare il progetto sopra.

Ho due file html sotto questo. abc.html e xyz.html. Per inserire immagini nella pagina html, ho usato l'URL come questo:

<img src="https://example.com/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px"> 

Ma voglio usare un file immagine situato nel mio server invece. Ho provato a posizionare il file nella stessa directory del file html ma non funziona. Ho persino provato a dare un percorso completo ma inutile. Questo è un sistema operativo Ubuntu. Per favore aiutami qui. C'è un posto dove posso configurare il percorso di base o fondamentalmente come mettere un'immagine dalla mia cartella locale.

Answer 1

Desidero esaminare la documentazione di Thymeleaf di Standard URL Syntax e in particolare i modelli di url relativi al contesto e relativi al server.

Context-URL relativo:

Se si desidera collegare le risorse all'interno della vostra webapp allora si dovrebbe usare contesto relativi URL. Si tratta degli URL che dovrebbero essere relativi alla root dell'applicazione Web una volta installati sul server . Ad esempio, se distribuiamo un file myapp.war su un server Tomcat , la nostra applicazione sarà probabilmente accessibile come http://localhost:8080/myapp e myapp sarà il nome del contesto.

Come JB Nizet seguito lavorerà per voi come ho usato thymeleaf personalmente in un progetto webapp,

<img th:src="@{/images/test.png}"/> 

e la test.png dovrebbe essere sotto la radice del progetto all'interno della cartella webapp. Qualcosa navigato attraverso approssimativamente come,

Myapp->webapp->images->test.png 

Esempio:

<img th:src="@{/resources/images/Picture.png}" /> 

uscita come:

<img src="/resources/image/Picture.png" /> 

Quando si ha colpito http://localhost:8080/myapp/resources/images/Picture.png in voi il browser allora si dovrebbe essere in grado di accedere l'immagine per la sintassi sopra per funzionare. E la cartella delle risorse sarà probabilmente nella cartella webapp dell'applicazione.

URL del server-relativo:

URL relativo al server sono molto simili agli URL al contesto relativo, tranne essi non assumono volete che il vostro URL da collegamento a una risorsa all'interno della vostra applicazione di contesto, permettono quindi di linkare una un contesto diverso sullo stesso server

Sintassi:

<img th:src="@{~/billing-app/images/Invoice.png}"> 

uscita come:

<a href="/billing-app/showDetails.htm"> 

L'immagine sopra verrà caricata da un'applicazione differente dal vostro contesto e se un'applicazione denominata billing-app è presente nel server.

provenienti da: Thymeleaf documentation

Answer 2

È necessario capire come funziona HTTP. Quando il browser carica una pagina all'URL

http://some.host/myWebApp/foo/bar.html 

e la pagina HTML contiene

<img src="images/test.png"/> 

il browser invierà una seconda richiesta HTTP al server per caricare l'immagine. L'URL dell'immagine, poiché il percorso è relativo, sarà http://some.host/myWebApp/foo/images/test.png. Si noti che il percorso assoluto è composto dalla "directory" corrente della pagina, concatenata con il percorso relativo dell'immagine. Il percorso del JSP lato server o del template thymeleaf è completamente irrilevante qui. Ciò che conta è l'URL della pagina, come visualizzato nella barra degli indirizzi del browser. Questo URL è, in una tipica applicazione MVC di primavera, l'URL del controller in cui è stata inviata la richiesta iniziale.

Se il percorso dell'immagine è assoluto:

<img src="/myWebApp/images/test.png"/> 

allora il browser invierà una seconda richiesta all'URL http://some.host/myWebApp/images/test.png. Il browser inizia dalla radice del server Web e concatena il percorso assoluto.

Per poter fare riferimento a un'immagine, indipendentemente dall'URL della pagina, un percorso assoluto è quindi preferibile e più facile da utilizzare.

Nell'esempio precedente, /myWebApp è il percorso di contesto dell'applicazione, che in genere non si desidera codificare nel percorso, poiché potrebbe cambiare. Per fortuna, secondo lo thymeleaf documentation, thymeleaf lo capisce e fornisce una sintassi per i percorsi relativi al contesto, che quindi trasforma percorsi come /images/test.png in /myWebApp/images/test.png. Così la vostra immagine dovrebbe essere simile

<img th:src="@{/images/test.png}"/> 

(non ho mai usato thymeleaf, ma è quello che deduco dalla documentazione).

E l'immagine test.png deve quindi trovarsi in una cartella images situata nella radice della webapp.