Для страниц HTML я просто устанавливаю тег HTML <base>
. Каждая относительная ссылка (т.е. не начинающаяся со схемы или /
) станет относительной к ней. Не существует чистого способа получить его немедленно с помощью HttpServletRequest
, поэтому нам нужна небольшая помощь 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="url">${req.requestURL}</c:set>
<c:set var="uri">${req.requestURI}</c:set>
<!DOCTYPE html>
<html lang="en">
<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="other.jsp">link</a>
</body>
</html>
Это, в свою очередь, имеет одну оговорку: якоря (URL #identifier
) также становятся относительно базового пути. Если у вас есть какой-либо из них, вы бы хотели сделать его относительно URL-адреса запроса (URI). Итак, измените как
<a href="#identifier">jump</a>
до
<a href="${uri}#identifier">jump</a>
В JS вы можете просто получить доступ к элементу <base>
из DOM, когда вы хотите преобразовать относительный URL в абсолютный URL.
var base = document.getElementsByTagName("base")[0].href;
Или, если вы делаете JQuery
var base = $("base").attr("href");
В CSS URL-адреса изображений относятся к URL-адресу самой таблицы стилей. Поэтому просто поместите изображения в какую-либо папку относительно самой таблицы стилей. Э.Г.
/css/style.css
/css/images/foo.png
и ссылаться на них следующим образом
background-image: url('images/foo.png');
Если вы предпочитаете помещать изображения в какую-то папку на том же уровне, что и папка CSS
/css/style.css
/images/foo.png
затем используйте ../
для перехода в общую родительскую папку
background-image: url('../images/foo.png');
Смотри также: