El navegador no puede acceder / encontrar recursos relativos como CSS, imágenes y enlaces cuando llama a un servlet que lo reenvía a un JSP

Tengo problemas para cargar CSS e imágenes y crear enlaces a otras páginas cuando tengo un servlet reenviado a un JSP. Específicamente, cuando configuro mi en index.jsp , el CSS se carga y se muestran mis imágenes. Sin embargo, si configuro mi en HomeServlet que reenvía el control a index.jsp , el CSS no se aplica y mis imágenes no se muestran.

Mi archivo CSS está en web/styles/default.css .
Mis imágenes están en web/images/ .

Me estoy vinculando a mi CSS de esta manera:

  

Estoy mostrando mis imágenes de la siguiente manera:

 Image1 

¿Cómo se causa este problema y cómo puedo resolverlo?


Actualización 1 : He agregado la estructura de la aplicación, así como otra información que podría ayudar.

texto alternativo

El archivo header.jsp es el archivo que contiene la etiqueta de enlace para el CSS. HomeServlet está configurado como mi welcome-file en web.xml :

  HomeServlet  

El servlet se declara y mapea como sigue en web.xml :

  HomeServlet com.brianblog.frontend.HomeServlet   HomeServlet /  

Actualización 2 : finalmente encontré el problema: mi servlet fue mapeado incorrectamente. Aparentemente, al configurar un Servlet como su no puede tener un patrón de URL de / , lo que me parece un poco extraño, porque ¿eso no significaría el directorio raíz del sitio?

El nuevo mapeo es el siguiente:

  HomeServlet /HomeServlet  

Todas las URL relativas en la página HTML generadas por el archivo JSP son relativas a la URL de solicitud actual (la URL como se ve en la barra de direcciones del navegador) y no a la ubicación del archivo JSP en el servidor como parece esperar. Se trata del navegador web que tiene que descargar esos recursos individualmente por URL, no el servidor web que debe incluirlos en el disco de alguna manera.

Además de cambiar las direcciones URL relativas para que sean relativas a la URL del servlet en lugar de la ubicación del archivo JSP, otra forma de solucionar este problema es hacerlas relativas a la raíz del dominio (es decir, comenzar con a / ). De esta forma, no tendrá que preocuparse por cambiar las rutas relativas una vez más cuando cambie la URL del servlet.

       link 

Sin embargo, probablemente le gustaría no codificar la ruta de contexto. Muy razonable. Puede obtener la ruta de contexto en EL por ${pageContext.request.contextPath} .

       link 

(que se puede acortar fácilmente por y se usa como ${root} otro lugar)

O bien, si no teme que XML ilegible y el resaltado de syntax XML rotos, use JSTL :

  " /> ">   " /> ">link 
">

De cualquier manera, esto a su vez es bastante engorroso si tiene muchas URL relativas. Para eso puedes usar la etiqueta . Todas las URL relativas se volverán instantáneamente relativas a ella. Sin embargo, debe comenzar con el esquema ( http:// , https:// , etc.). No existe una forma clara de obtener la ruta de contexto base en EL simple, por lo que necesitamos una pequeña ayuda de JSTL aquí.

 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>   ${req.requestURL} ...        link 

Esto tiene a su vez (nuevamente) algunas advertencias. Anclas (las #identifier URL del #identifier ) también serán relativas a la ruta base. En su lugar, le gustaría hacerlo en relación con la URL de solicitud (URI). Entonces, cambie como

 jump 

a

 jump 

Cada forma tiene sus propios pros y contras. Depende de usted elegir. Al menos, ahora debes entender cómo se causa este problema y cómo resolverlo 🙂

Ver también:

  • ¿Se recomienda utilizar la etiqueta html?

Me enfrenté a un problema similar con la aplicación Spring MVC. < mvc:resources > etiqueta < mvc:resources > para resolver este problema.

Por favor encuentre el siguiente enlace con más detalles.

http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/

Debe analizar la salida de HTML real, para la sugerencia.

Al dar el camino de esta manera significa “desde la ubicación actual”, por otro lado, si comienza con un / que significa “del contexto”.

Su página de bienvenida está configurada como ese servlet. Por lo tanto, todas las CSS, la ruta de las imágenes se debe dar en relación con ese servlet DIR. que es una mala idea! ¿Por qué necesita el servlet como página de inicio? establecer .jsp como página de índice y redirigir a cualquier página desde allí?

¿Estás tratando de poblar cualquier campo de db? ¿Es por eso que estás usando servlet?

Si está utilizando Spring MVC, necesita declarar el servlet de acción predeterminado para los contenidos estáticos. Agregue las siguientes entradas en spring-action-servlet.xml. Funcionó para mí

NOTA: mantenga todos los contenidos estáticos fuera de WEB-INF.

         

En cuanto a su actualización, estaba confundido por el razonamiento detrás de. Profundicé un poco más y encontré esta gem:

  • yoursite.com se convierte en yoursite.com/
  • yoursite.com/ es un directorio, por lo que la lista de archivos de bienvenida se escanea
  • yoursite.com/CMS es el primer archivo de bienvenida (“CMS” en la lista de archivos de bienvenida), y hay una asignación de / CMS al servlet MyCMS, de modo que se accede al servlet.

Fuente: http://wiki.metawerx.net/wiki/HowToUseAServletAsYourMainWebPage

Entonces, el mapeo tiene sentido.

¡Y ahora se puede usar libremente $ {pageContext.request.contextPath} / path / as src / href para enlaces relativos!

respuesta corta – agregue la siguiente línea en el jsp que definirá la base
base href = “/ {raíz de su aplicación} /”

Debajo del código funcionó para mí.

en lugar de usar <% @ include file = "styles / default.css"%>