Извлечение изображения из контекстного пути сервера из кода JavaScript

Question

У меня есть веб-приложение на основе Spring MyWebapp , созданное с использованием maven и развернутое на Websphere 6.1

Структура папок:

MyApp -> src---> main --->

В папке main также есть папки resources и webapp .

в папках веб-приложения есть другие папки, такие как images, theme, jscript, JSP, META-INF, WEB-INF

папка с изображениями содержит icons папка с скажем example.png

Так что извлечение example.png на локальный хост как:

http://localhost:9080/MyWebapp/images/icons/example.png

успешно.

В папке jscript у меня есть файл sample.js javascript, в котором определены некоторые функции.

Я импортирую этот файл javascript на страницах JSP как:

<script src="<%=request.getContextPath()%>/jscript/sample.js" type="text/javascript" language="Javascript"></script>

Этот файл javascript имеет функцию, которая пытается получить изображение, как показано ниже:

iconFile = '../images/icons/search_result.png';  
anchor.style.backgroundImage = 'url(' + iconFile + ')'; 
anchor.style.backgroundRepeat = 'no-repeat';        
anchor.style.backgroundPosition = '1px 2px';        
anchor.className = 'toplevel-tab';

Функция complete пытается разместить значок перед текстом в JSP.

Код анализируется.Однако изображение не отображается.

Успешное выполнение кода независимо от простого HTML с изображениями PNG в той же папке, что и файлы HTML и Javascript.Здесь у меня будет просто iconFile = "search_result.png"

Итак, проблема не в коде.

Проблема в том, что изображение не находится или сервер не может найти изображениев приведенном выше коде JavaScript.

Что я делаю не так?Как я могу это решить?

Ответ на https://stackoverflow.com/a/8298652/887235, который я принял ранее, не работает. Поэтому, пожалуйста, не называйте этот вопрос дублирующим.

Также я работаю в ограниченной среде, где доступ к таким программам, как Tail, не будет работать.

Изменение

iconFile = '../images/icons/search_result.png';

на

iconFile = '/images/icons/search_result.png';

также не работает !!

Спасибо за чтение!

Answer 1

Вам необходимо дать вашему javascript понимание пути к корню вашего приложения, так как это изменится в зависимости от контекста. Начните с объявления глобальной переменной, такой как:

<script>
    var siteroot = "<%=request.getContextPath()%>";
</script>

Затем вы готовы использовать его позже, например:

iconFile = siteroot + '/images/icons/search_result.png';  

Answer 2

Вы просто должны понять, как работают относительные пути. Даже если путь находится в файле JavaScript, он не относится к местоположению этого файла JS, но относится к URL-адресу страницы HTML, отображаемой в браузере.

Итак, если URL страницы, на которой выполняется этот код JavaScript, равен

http://foo.bar.com/myWebApp/zim/boom/tchak.html

и URL-адрес изображения

../images/icons/search_result.png

Абсолютный URL изображения будет

http://foo.bar.com/myWebApp/zim/boom/../images/icons/search_result.png 

, что совпадает с

http://foo.bar.com/myWebApp/zim/images/icons/search_result.png 

Абсолютный путь, такой как /images/icons/search_result.png, также разрешается из корня веб-сервера, а не из корня веб-приложения (браузер не знает, что такое веб-приложение Java, и ему все равно). Так что это решено как

http://foo.bar.com/images/icons/search_result.png

Вам необходимо добавить путь к контексту, чтобы сделать его действительно абсолютным:

<%=request.getContextPath()%>/images/icons/search_result.png

или без скриплетов:

${pageContext.request.contextPath}/images/icons/search_result.png