javascript - 从javascript代码获取服务器上下文路径中的图像

Question

我有一个基于 spring 的 Web 应用程序 MyWebapp 使用 Maven 构建并部署在 Websphere 6.1 上

文件夹结构是:

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

ma​​in 文件夹还有resources 和webapp 文件夹。

webapp 文件夹包含其他文件夹，如 images、theme、jscript、JSP、META-INF、WEB-INF

images 文件夹有 icons 文件夹，比如 example.png

因此在本地主机上获取 example.png 为:

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

成功。

在 jscript 文件夹中，我有一个 sample.js javascript 文件，其中定义了一些函数。

我在 JSP 页面中将这个 javascript 文件导入为:

<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';

完整的功能基本上是尝试在 JSP 中的某些文本之前放置一个图标。

代码被解析。但是，图像不会显示。

使用与 html 和 javascript 文件位于同一文件夹中的 png 图像在简单的 html 上独立运行代码成功。在这里我只有 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 文件中，路径也不是相对于此 JS 文件的位置，而是相对于浏览器中显示的 HTML 页面的 URL。

因此，如果执行此 javascript 代码的页面的 URL 是

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这样的绝对路径也是从web服务器的根目录解析的，而不是webapp的根目录(浏览器不知道什么是Java webapp 是并且不在乎)。所以解析为

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

您需要将上下文路径添加到路径的前面以使其真正成为绝对路径:

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

或者，没有 scriptlet:

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