Браузер не может получить доступ / найти относительные ресурсы, такие как CSS, изображения и ссылки при вызове сервлета, который перенаправляет на JSP


у меня возникли проблемы с загрузкой CSS и изображений и созданием ссылок на другие страницы, когда у меня есть сервлет вперед к JSP. В частности, когда я устанавливаю свой <welcome-file> до index.jsp, CSS загружается и мои изображения отображаются. Однако, если я установил мой <welcome-file> до HomeServlet, который передает управление index.jsp, CSS не применяется и мои изображения не отображаются.

мой CSS файл находится в web/styles/default.css.
Мои изображения находятся в web/images/.

Я ссылка на мой CSS вот так:

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

Я показываю свои изображения следующим образом:

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

как эта проблема вызвана и как я могу ее решить?


обновление 1: я добавил структуру приложения, а также некоторые другие сведения, которые могут помочь.

The header.jsp файл-это файл, содержащий тег ссылки для CSS. Элемент HomeServlet это я welcome-file in web.xml:

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

сервлет объявляется и отображается следующим образом в 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>

обновление 2: я нашел проблему наконец - мой сервлет был отображен неправильно. По-видимому, при установке сервлета в качестве вашего <welcome-file> он не может иметь шаблон URL /, что я нахожу странным, потому что это не будет означать корневой каталог сайта?

новое отображение выглядит следующим образом:

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

8 ответов:

все относительные URL-адреса в HTML-странице, созданной файлом JSP, относятся к текущему URL-адресу запроса (URL-адрес, как вы видите в адресной строке браузера) и не к местоположению файла JSP на стороне сервера, как вы, кажется, ожидаете. Именно webbrowser должен загружать эти ресурсы индивидуально по URL, а не веб-сервер, который должен каким-то образом включать их с диска.

Помимо изменения относительных URL-адресов, чтобы сделать их относительно URL-адреса сервлет вместо расположения файла JSP, другой способ исправить эту проблему, чтобы сделать их относительно корня домена (т. е. начать с /). Таким образом, вам не нужно беспокоиться об изменении относительных путей еще раз при изменении URL-адреса сервлета.

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

тем не менее, вы, вероятно, не хотели бы жестко кодировать путь контекста. Очень разумный. Вы можете получить контекстный путь в EL с помощью ${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>

(который может быть легко укоротить на <c:set var="root" value="${pageContext.request.contextPath}" /> и используется как ${root} в другом месте)

или, если вы не боитесь нечитаемого XML и сломанной подсветки синтаксиса XML, используйте 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>

в любом случае, это, в свою очередь, довольно громоздко, если у вас много относительных URL-адресов. Для этого вы можете использовать <base> тег. Все относительные URL-адреса мгновенно станут относительно него. Однако он должен начинаться со схемы (http://,https:// и т. д.). Есть нет аккуратного способа получить базовый контекстный путь в plain EL, поэтому нам нужна небольшая помощь JSTL здесь.

<%@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>

это в свою очередь (опять же) некоторые предостережения. Якоря (тег #identifier URL) станет относительно базового пути, а также! Вместо этого вы хотите сделать его относительно URL-адреса запроса (URI). Так что, изменить как

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

до

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

каждый способ имеет свои плюсы и минусы. Это зависит от вас, что выбрать. По крайней мере, вы должны сейчас поймите, как эта проблема вызвана и как ее решить:)

Читайте также:

я столкнулся с аналогичной проблемой с приложением Spring MVC. Я использовал < mvc:resources > тег для решения этой проблемы.

пожалуйста, найдите следующую ссылку с более подробной информацией.

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

вы должны проанализировать фактический вывод HTML, для подсказки.

давая путь, как это означает "из текущего местоположения", с другой стороны, если вы начинаете с / Это будет означать "из контекста".

ваша страница приветствия установлена как этот сервлет . Таким образом , все css, путь к изображениям должен быть задан относительно этого сервлета DIR . это плохая идея ! зачем вам нужен сервлет в качестве домашней страницы ? набор.jsp как индексная страница и перенаправление на любую страницу оттуда ?

вы пытаетесь заполнить какие-либо поля из БД, поэтому вы используете сервлет ?

Если вы используете Spring MVC, то вам нужно объявить сервлет действия по умолчанию для статического содержимого. Добавьте следующие записи в Spring-action-servlet.XML. Это сработало для меня.

Примечание: держите все статическое содержание вне 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"/>

Что касается вашего обновления, я был смущен обоснование в. Копнул глубже и нашел этот перл:

  • yoursite.com становится yoursite.com/
  • yoursite.com/ является каталогом, поэтому список файлов приветствия сканируется
  • yoursite.com/CMS является первым файлом приветствия ("CMS" в списке файлов приветствия), и существует сопоставление /CMS с сервлетом MyCMS, так что сервлет доступен.

источник: http://wiki.metawerx.net/wiki/HowToUseAServletAsYourMainWebPage

Итак, отображение тогда имеет смысл.

и теперь можно свободно использовать ${pageContext.запрос.contextPath} / path / as src / href для относительных ссылок!

короткий ответ-добавьте следующую строку в jsp, которая определит базу
база href= " / {корень вашего приложения}/"

ниже код работал для меня.

вместо использовать