Saltar al contenido

Insertar una imagen del directorio local en el marco de primavera de thymeleaf (con maven)

Mantén la atención ya que en esta crónica hallarás la contestación que buscas.Esta sección fue analizado por nuestros especialistas para asegurar la calidad y veracidad de nuestro post.

Solución:

Quiero que consulte la documentación de Thymeleaf sobre la sintaxis de URL estándar y específicamente los patrones de URL relativos al contexto y al servidor.

URL relativa al contexto:

Si desea vincular recursos dentro de su aplicación web, debe usar URL relativas al contexto. Estas son URL que se supone que son relativas a la raíz de la aplicación web una vez que se instala en el servidor. Por ejemplo, si implementamos un archivo myapp.war en un servidor Tomcat, probablemente se podrá acceder a nuestra aplicación como http://localhost:8080/myapp, y miaplicacion será el nombre del contexto.

Como JB Nizet, lo siguiente funcionará para usted, ya que he usado thymeleaf personalmente en un proyecto de aplicación web,


y el test.png debe estar debajo de la raíz de su proyecto dentro de la carpeta de la aplicación web. Algo navegó a través de aproximadamente como,

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

P.ej:


Salida como:


cuando golpeas http://localhost:8080/myapp/resources/images/Picture.png en su navegador, entonces debería poder acceder a la imagen para que funcione la sintaxis anterior. Y su carpeta de recursos probablemente estará en la carpeta webapp de su aplicación.

URL relativa al servidor:

Las URL relativas al servidor son muy similares a las URL relativas al contexto, excepto que no asumen que desea que su URL se vincule a un recurso dentro del contexto de su aplicación y, por lo tanto, le permiten vincular a un contexto diferente en el mismo servidor.

Sintaxis:


Salida como:


La imagen de arriba se cargará desde una aplicación diferente de su contexto y si una aplicación llamada billing-app está presente en su servidor.

Procedente de: documentación de Thymeleaf

Debe comprender cómo funciona HTTP. Cuando el navegador carga una página en URL

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

y la página HTML contiene


el navegador enviará una segunda solicitud HTTP al servidor para cargar la imagen. La URL de la imagen, ya que la ruta es relativa, será http://some.host/myWebApp/foo/images/test.png. Tenga en cuenta que la ruta absoluta se compone del “directorio” actual de la página, concatenado con la ruta relativa de la imagen. La ruta del JSP del lado del servidor o la plantilla thymeleaf es completamente irrelevante aquí. Lo que importa es la URL de la página, tal como se muestra en la barra de direcciones del navegador. Esta URL es, en una aplicación Spring MVC típica, la URL del controlador donde se envió la solicitud inicial.

Si la ruta de la imagen es absoluta:


luego el navegador enviará una segunda solicitud a la URL http://some.host/myWebApp/images/test.png. El navegador comienza desde la raíz del servidor web y concatena la ruta absoluta.

Para poder hacer referencia a una imagen, cualquiera que sea la URL de la página, una ruta absoluta es preferible y más fácil de usar.

En el ejemplo anterior, /myWebAppes la ruta de contexto de la aplicación, que normalmente no desea codificar en la ruta, porque podría cambiar. Afortunadamente, de acuerdo con la documentación de thymeleaf, thymeleaf entiende eso y proporciona una sintaxis para rutas relativas al contexto, que transforma rutas como /images/test.png dentro /myWebApp/images/test.png. Así que tu imagen debería verse como


(Nunca he usado thymeleaf, pero eso es lo que deduzco de la documentación).

Y el test.png la imagen debe estar en una carpeta images ubicado debajo de la raíz de la aplicación web.

Obtener enlace en Internet:

String src = "https://example.com/image.jpg";

HTML:

valoraciones y comentarios

Si haces scroll puedes encontrar las crónicas de otros sys admins, tú incluso eres capaz dejar el tuyo si lo deseas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *