从 javascript 代码获取服务器上下文路径中的图像 [英] Fetching a image in server context path from javascript code

问题描述

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

I have a spring based web application MyWebapp built using maven and deployed on Websphere 6.1

文件夹结构为:

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

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

The main folder is further having resources and webapp folders.

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

webapp folders is having other folders like images, theme, jscript, JSP, META-INF, WEB-INF

images 文件夹有 icons 文件夹，上面写着 example.png

images folder is having icons folder with say example.png

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

So fetching example.png on localhost as:

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

成功.

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

In jscript folder I have a sample.js javascript file where some functions are defined.

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

I am importing this javascript file in JSP pages as:

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

这个 javascript 文件有一个函数试图获取图像，如下所示:

This javascript file is having a function which tries to fetch image as below:

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 中的一些文本之前放置一个图标.

The complete function basically tries to place a icon before some text in JSP.

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

The code gets parsed. However, the image does not get displayed.

在与 html 和 javascript 文件位于同一文件夹中的 png 图像的简单 html 上独立运行代码成功.在这里我只有 iconFile = "search_result.png"

Running the code independently on a simple html with the png images in the same folder as html and javascript files succeeds. Here i will just have iconFile = "search_result.png"

所以，这不是代码问题.

So, it is not code issue.

问题是图像未定位或服务器无法在上面的 javascript 代码中找到图像.

Issue is that the image is not getting located or the server is unable to find the image in above javascript code.

我做错了什么?我该如何解决?

What am I doing wrong ? How can I solve it ?

我之前接受的 https://stackoverflow.com/a/8298652/887235 的答案不起作用.所以请不要将此问题视为重复问题.

The answer for https://stackoverflow.com/a/8298652/887235 which I accepted earlier does not work. So please do not downvote this question as a duplicate one.

此外，我还在受限环境中工作，在该环境中无法访问像 Tail 这样的程序.

Also I am working on restricted environment where access to programs like Tail will not work.

变化

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

到

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

也不行！！

感谢阅读！

推荐答案

您只需要了解相对路径的工作原理.即使路径在 JavaScript 文件中，路径也不是相对于这个 JS 文件的位置，而是相对于浏览器中显示的 HTML 页面的 URL.

You just have to understand how relative paths work. Even if the path is in a JavaScript file, the path is not relative to the location of this JS file, but it's relative to the URL of the HTML page being displayed in the browser.

所以，如果执行这个javascript代码的页面的URL是

So, if the URL of the page executing this javascript code is

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

图片的网址是

../images/icons/search_result.png

图片的绝对网址是

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 的根目录(浏览器不知道什么是 Javawebapp 不在乎).所以它被解析为

An absolute path like /images/icons/search_result.png is also resolved from the root of the web server, and not the root of the webapp (the browser doesn't know what a Java webapp is and doesn't care). So it's resolved as

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

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

You would need to prepend the context path to the path to make it really absolute:

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

或者，没有脚本:

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

这篇关于从 javascript 代码获取服务器上下文路径中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！