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

Question

我有一个基于 Spring 的 Web 应用程序 MyWebapp，使用 maven 构建并部署在 Websphere 6.1 上。

文件夹结构为：

MyApp -->源代码 ---> 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 上独立运行代码（其中 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 文件中，该路径也不是相对于该 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 服务器的根目录解析的，而不是从 Web 应用程序的根目录解析的（浏览器不知道 Java Web 应用程序是什么，也不关心）。所以它被解决了，因为

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

Answer 2

您需要让 JavaScript 了解应用程序根目录的路径，因为这会根据上下文而改变。首先声明一个全局变量，如：

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

然后，就可以稍后使用它了，如：

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