86 votes

Le navigateur ne peut pas accéder à/trouver par rapport à des ressources comme les CSS, les images et les liens lors de l'appel d'une Servlet, qui la transmet à une JSP

Je vais avoir des ennuis avec le chargement des CSS et des images et la création de liens vers d'autres pages quand j'ai une servlet avec impatience une JSP. Plus précisément, lorsque j'ai mis mon <welcome-file> de index.jsp, le CSS est chargé et mes images sont affichées. Cependant, si j'ai mis mon <welcome-file> de HomeServlet qui transfère le contrôle à l' index.jsp, le CSS n'est pas appliquée et mes images ne sont pas affichées.

Mon fichier CSS est dans web/styles/default.css.
Mes images sont en web/images/.

Je suis un lien vers mon CSS comme ceci:

<link href="styles/default.css" rel="stylesheet" type="text/css" />

Je suis de l'affichage de mes images comme suit:

<img src="images/image1.png" alt="Image1" />

Comment est ce problème et comment le résoudre?


Mise à jour 1: j'ai ajouté de la structure de l'application, ainsi que quelques autres informations qui pourraient les aider.

alt text

L' header.jsp le fichier est le fichier qui contient la balise de lien pour le CSS. L' HomeServlet est défini comme ma welcome-file en web.xml:

<welcome-file-list>
    <welcome-file>HomeServlet</welcome-file>
</welcome-file-list>

La servlet est déclarée et mappé comme découlant de l' web.xml:

<servlet>
    <servlet-name>HomeServlet</servlet-name>
    <servlet-class>com.brianblog.frontend.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

Mise à jour 2: j'ai trouvé le problème enfin - ma servlet a été cartographié de manière incorrecte. Apparemment, lors de la définition d'une Servlet comme votre <welcome-file> il ne peut pas avoir un modèle d'URL de /, que je trouve un peu bizarre, parce que ce ne serait pas de stand pour le répertoire racine du site?

La nouvelle cartographie est comme suit:

<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>

104voto

BalusC Points 498232

Toutes les Url de la page HTML générée par le fichier JSP sont relatifs à la demande de l'URL (l'URL que vous voyez dans la barre d'adresse du navigateur) et non à l'emplacement du fichier JSP dans le côté serveur comme vous semblez attendre. C'est à savoir le webbrowser qui a afin de télécharger les ressources individuellement par URL, pas le serveur qui a de les inclure à partir du disque en quelque sorte.

En dehors de changer les Url relatives pour les faire par rapport à l'URL de la servlet au lieu de l'emplacement du fichier JSP, une autre façon de résoudre ce problème est de les faire par rapport à la racine du domaine (c'est à dire commencer avec un /). De cette façon, vous n'avez pas besoin de vous soucier de changer les chemins d'accès relatifs une fois de plus lorsque vous changez l'URL de la servlet.

<head>
    <link rel="stylesheet" href="http://stackoverflow.com/context/css/default.css" />
    <script src="/context/js/default.js"></script>
</head>
<body>
    <img src="/context/img/logo.png" />
    <a href="http://stackoverflow.com/context/page.jsp">link</a>
    <form action="/context/servlet"><input type="submit" /></form>
</body>

Cependant, vous aimeriez probablement que de ne pas coder en dur le chemin de contexte. Très raisonnable. Vous pouvez obtenir le chemin de contexte dans EL en ${pageContext.request.contextPath}.

<head>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css" />
    <script src="${pageContext.request.contextPath}/js/default.js"></script>
</head>
<body>
    <img src="${pageContext.request.contextPath}/img/logo.png" />
    <a href="${pageContext.request.contextPath}/page.jsp">link</a>
    <form action="${pageContext.request.contextPath}/servlet"><input type="submit" /></form>
</body>

(qui peut facilement être raccourcie en <c:set var="root" value="${pageContext.request.contextPath}" /> et utilisé comme ${root} ailleurs)

Ou, si vous n'avez pas peur illisible XML et XML endommagé de la syntaxe, l'utilisation de JSTL <c:url>:

<head>
    <link rel="stylesheet" href="<c:url value="/css/default.css" />" />
    <script src="<c:url value="/js/default.js" />"></script>
</head>
<body>
    <img src="<c:url value="/img/logo.png" />" />
    <a href="<c:url value="/page.jsp" />">link</a>
    <form action="<c:url value="/servlet" />"><input type="submit" /></form>
</body>

De toute façon, c'est assez lourd si vous avez beaucoup d'Url relatives. Pour cela, vous pouvez utiliser l' <base> balise. Toutes les URL relative volonté de devenir instantanément par rapport à elle. Il a cependant commencer avec le schéma (http://, https://, etc). Il n'y a pas de manière simple pour obtenir la base de chemin de contexte dans la plaine d'EL, nous avons donc besoin d'un peu d'aide de la JSTL ici.

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="req" value="${pageContext.request}" />
<c:set var="uri" value="${req.requestURI}" />
<c:set var="url">${req.requestURL}</c:set>
...
<head>
    <base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
    <link rel="stylesheet" href="css/default.css" />
    <script src="js/default.js"></script>
</head>
<body>
    <img src="img/logo.png" />
    <a href="page.jsp">link</a>
    <form action="servlet"><input type="submit" /></form>
</body>

Ce qui a (encore) quelques mises en garde. Les ancres (l' #identifier URL) deviendra par rapport à la base du chemin ainsi! Vous souhaitez faire par rapport à l'URL de la requête (URI) à la place. Donc, changement de

<a href="#identifier">jump</a>

pour

<a href="${uri}#identifier">jump</a>

Chacune a ses propres avantages et inconvénients. C'est à vous de choisir. Au moins, vous devriez maintenant comprendre comment ce problème est dû et comment le résoudre :)

Voir aussi:

2voto

Adeel Ansari Points 24434

Vous devez analyser le véritable sortie HTML, pour l'astuce.

En donnant le chemin d'accès de ce genre "de l'emplacement actuel", d'autre part, si vous commencez avec un / , ce qui signifierait "dans le contexte".

0voto

GoodSp33d Points 2045

Votre page d'accueil est définie en tant Que Servlet . Donc, tous les css , les images de chemin d'accès doit être donné par rapport à celle de la servlet DIR . ce qui est une mauvaise idée ! pourquoi avez-vous besoin de la servlet comme une page d'accueil ? ensemble .jsp que la page d'index et de rediriger vers une page à partir de là ?

êtes-vous essayer de remplir tous les champs de db, c'est que pourquoi vous utilisez servlet ?

0voto

user3782590 Points 1

Si vous êtes à l'aide de Spring MVC, alors vous devez déclarer l'action par défaut de servlet pour les contenus statiques. Ajoutez les entrées suivantes dans spring-action-servlet.xml. Il a travaillé pour moi.

REMARQUE: garder tout le contenu statique à l'extérieur de WEB-INF.

<!-- Enable annotation-based controllers using @Controller annotations -->
<bean id="annotationUrlMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
    <property name="order" value="0" />
</bean>

<bean id="controllerClassNameHandlerMapping" class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping">
    <property name="order" value="1" />
</bean>

<bean id="annotationMethodHandlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X