Fetching a image in server context path from javascript code

问题

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

The folder structure is:

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

The main folder is further having resources and webapp folders.

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

images folder is having icons folder with say example.png

So fetching example.png on localhost as:

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

succeeds.

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

I am importing this javascript file in JSP pages as:

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

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

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.

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.

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 ?

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.

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

Changing

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

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

also does not work!!

Thanks for reading!

回答1:

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.

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

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

and the URL of the image is

../images/icons/search_result.png

The absolute URL of the image will be

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

which is the same as

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

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

or, without scriptlets:

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

回答2:

You need to give your javascript an awareness of the path to the root of your application, as this will change on context. Start by declaring a global variable, such as:

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

Then, you are ready to use it later, such as:

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

来源：https://stackoverflow.com/questions/8487724/fetching-a-image-in-server-context-path-from-javascript-code

标签

javascript

image

websphere